/*Looking inside - Selects all the li elements placed (anywhere) inside the ul;Descendant selector */
ul li
/*Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector*/
ul > li
/* Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector */
ul + ul
/* Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector */
ul ~ ul
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
/* Scroll for HTML part for visualization
There are four different combinators in CSS:
Descendant Selector - selects all of specified parent */
ul li{
background-color: orange;
}
/* Child Selector - selects only children */
ul > li{
background-color: red;
}
/* Adjacent Sibling Selector - selects only the immediate sibling*/
ul + li{
color: blue;
}
/* General Sibling Selector - selects all the siblingss */
ul ~ li{
background: yellow;
}
/* Next is the HTML part for the CSS
<body>
<h2>Combinators CSS</h2>
<ul>
<li>Child1</li>
<ol>
<li>Descendant1</li>
<li>Descendant2</li>
</ol>
<li>Child2</li>
<li>Child3</li>
<li>Child4</li>
</ul>
<li>Sibling1</li>
<li>Sibling2</li>
</body>
*//* selects any <span> that is inside a <p>, which is inside an <article> */
article p span { ... }
/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
h1 + ul + p { ... }div p {
background-color: yellow;
}| Code Example |
|---|
| Css :: make input invisible but clickable css |
| Css :: tailwindcss table |
| Css :: css contour |
| Css :: how to use local fonts in css |
| Css :: gray scale css |
| Css :: over to remove padding css |
| Css :: line cap css |
| Css :: css grid properties |
| Css :: how to give opacity to border |
| Css :: different measurements in css |
| Css :: how to center a list in html |
| Css :: border radius color |
| Css :: text change animation css |
| Css :: media query for max width and height |
| Css :: remove position absolute attribute by adding css |
| Css :: create arrow div css |
| Css :: Trimming One Line with CSS |
| Css :: css coor background |
| Css :: taille texte css |
| Css :: how to link css to html flask |
| Css :: how to space out buttons css |
| Css :: scss maps´ |
| Css :: The :invalid CSS pseudo-class |
| Css :: bootstrap table striped change color |
| Css :: sass table |
| Css :: use CSS to add a bullet point |
| Css :: css for chrome only |
| Css :: jquery css unset(remove) certain style |
| Css :: time an element to disappear css |
| Css :: hex color code for tan |