Blog _

CSS combinators – fine tune your selections


Posted at 9:54 pm on January 12, 2018 by Cesar

Hello gang,

Today’s post is a quick one on CSS combinators. Stick the kettle on, this will be fun!

Lets begin with a quick recap on CSS selections:

assuming we have the follomwing HTML:

<div class="div-class another-div-class">
  <ul class="ul-class">
     <li></li>
     <li class="middle-li-class"></li>
     <li></li>
  </ul>
</div>


Outer DIV

    UL

  • LI
  • LI
  • LI

If we want to apply the same style to two different elements each with their own different classes, then we can select both using the comma (,) seperator. For example:

.div-class, .ul-class{
/*some CSS */
/*
This will apply styles to elements containing either .div-class or .ul-class classes 
*/
border:2px dashed purple;
}

Outer DIV

    UL

  • LI
  • LI
  • LI

If we wanted to access the HTML element that contains both of the classes div-class and another-div-class, we can define them in our CSS together without spaces:

.div-class.another-div-class{
/*some CSS */
/*
this will apply to all elements that have BOTH classes -hence the outer div in the example
*/
border:2px dashed purple;
}

Outer DIV

    UL

  • LI
  • LI
  • LI

Descendant Selector

If we want to access an element inside of (a child of) this particular <div> that has the class ul-class,
we can define the selection in CSS as follows (note the spacing):

.div-class .ul-class{
/*some CSS */
/*
This will apply to elements with the class of ul-class,
that are contained within elements with the class of .div-class
In our example, the ul element
*/
border:2px dashed purple;
}

This CSS will target children of the element with the class .div-class that , they themselves, have the class .ul-class, see below:

Outer DIV

    UL

  • LI
  • LI
  • LI

The space between classes is refered to as the descendant operator.
Lets delve a little deeper into css combinators and look at ones we may have not encountered:

Direct Child Selector (>)

Lets consider the example:

<div class="div-class">Outer DIV
    <div>DIV
        <div>Nested DIV

        </div>
    </div>    
    <div>DIV
        <div>Nested DIV

        </div>
    </div>
    <div>DIV
        <div>Nested DIV

        </div>
    </div>
</div>

This selector is used to specifically target direct children – useful when you want to be a bit more specific.

Lets say we want to target the div elements labelled “DIV” – we can reference them from the .div-class class using the direct child selector..div-class>div will allow us to style div‘s labelled “DIV” without styling the nested div‘s labelled “Nested DIV”.

hence we can apply the following style:

.div-class>div{
border:2px dashed purple;
}

which will result in …

Outer DIV

DIV

Nested DIV

DIV

Nested DIV

DIV

Nested DIV

You could also style the grandchildren of the div element with the class of .div-class using the following CSS:

.div-class>div>div {
  border: 2px dashed teal;
}
Outer DIV

DIV

Nested DIV

DIV

Nested DIV

DIV

Nested DIV

Adjacent Sibling Combinator (+)

The adjacent sibling combinator is used to select the element that is the first adjacent element to the first value.
Both elements must be siblings of each other (e.i share the same parent element).

lets see it in action:
consider the HTML

<div class="parent-div">
  <p class="sister">
     P element with the class "sister"
  </p>
  <p class="brother">
     P element with the class "brother"
  </p>
  <p class="sister">
     P element with the class "sister"
  </p>
  <p class="sister"> 
    P element with the class "sister" 
  </p>
  <p class="brother">
    P element with the class "brother"
  </p>
  <p class="sister">
    P element with the class "sister"
  </p>
  <p class="sister"> 
    P element with the class "sister" 
  </p>
  <p class="brother">
    P element with the class "brother"
  </p>
</div>

we can see that there is a series of p elements with one p element with the class .brother
for every 2 p elements with class .sister

lets apply the following CSS:

.brother + .sister{
   background-color:pink;
}

P element with the class “sister”

P element with the class “brother”

P element with the class “sister”

P element with the class “sister”

P element with the class “brother”

P element with the class “sister”

P element with the class “sister”

P element with the class “brother”

As we can see in the example above, the CSS style has been applied to the p element with the class of .sister that directly follows the p element with the class brother.
Notice that the first p element with the class .sister had no CSS styles applied to it

simple right…

General Sibling Combinator (~)

Much like the adjacent sibling combinator, the general sibling combinator is used to apply styles to the second element if it follows the first element – how ever, it it “general” in that it will apply to any second elements even if they are not direct siblings.

This is best understood with an example,
Lets apply the following CSS to the HTML used in the previous example:

.brother ~ .sister{
   background-color:pink;

}

P element with the class “sister”

P element with the class “brother”

P element with the class “sister”

P element with the class “sister”

P element with the class “brother”

P element with the class “sister”

P element with the class “sister”

P element with the class “brother”

Notice that the first p element with the class .sister had no CSS styles applied to it
But all elements with the class of .sister that followed the .brother elements were styled

I hope you found this interesting!

Think you’re a CSS wizard? try this!

If you would like more CSS posts, let me know in the comments!



Comments

  • Hi,

    your example for the direct child selector is kind of useless, as the only has (and only can take) elements.
    So on this DOM you could use “.ul-class li” as well. Maybe an example with nested elements of the same type are more useful here.

    Regards,
    Manuel

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *