CODEWITHSUNDEEP
css
rockyraw
rockyraw

Reputation: 1145

Style last child of div with certain class

I have two DIV with the class "wrapper". I want to style them in general, and give special style to the last one:

<div class="cont">   

<span class="help">
<div class="wrapper">aaaa</div>
</span>


<span class="help">
<div class="wrapper">bbbbb</div>
</span>

</div>

(In my real example I have multiple divs inside the span, so I need to target this certain class)

I tried various CSS rules:

div.wrapper {  background:green;   }
div.wrapper:last-child{ background:red; }

div > span > div.wrapper {  background:green;   }
div > span > div.wrapper:last-child{ background:red; }

div .wrapper {  background:green;   }
div .wrapper:last-child{ background:red; }

Nothing, worked, not even: 

div div {  background:green;   }
div div:last-of-type { background:red; }

It always makes everything in Red, as if every DIV is the last child.

Upvotes: 2

Views: 224

Answers (1)

Danziger
Danziger

Reputation: 21161

:last-child is relative to the parent, so here:

<div class="cont">   
    <span class="help">
        <div class="wrapper">aaaa</div>
    </span>

    <span class="help">
        <div class="wrapper">bbbbb</div>
    </span>
</div>

The .wrapper with text aaaa is the :last-child of the first <span> with class .help, and the second .wrapper with text bbbbb is also the :last-child of the the second <span> with class .help.

You need to apply the :last-child selector to .help instead, which will select the last .help, and then use a descendant or child selector to target the .wrapper inside it:

.help:last-child > .wrapper

If you can also have multiple .wrapper inside a single .help and you only want to select the last one, then it would be:

.help:last-child > .wrapper:last-child

Here's an example:

body {
  font-family: monospace;
  font-size: 16px;
}

.cont {
  border: 3px solid #000;
  margin: 0 0 3px;
}

.help + .help {
  margin: 3px 0 0;
}

.wrapper {
  background: #F0F;
  padding: 1px 6px;
}

.help:last-child > .wrapper:last-child {
  background: #FF0;
}
<div class="cont"> 
  <div class="help">
      <div class="wrapper">AAA</div>
  </div>

  <div class="help">
      <div class="wrapper">BBB</div>
  </div>
</div>

<div class="cont"> 
  <div class="help">
      <div class="wrapper">CCC</div>
  </div>

  <div class="help">
      <div class="wrapper">DDD</div>
  </div>

  <div class="help">
      <div class="wrapper">EEE 1</div>
      <div class="wrapper">EEE 2</div>
      <div class="wrapper">EEE 3</div>
  </div>
</div>

As you have pointed out in the comments, if the last element inside a .cont is not a .help, but the previous one is, this one (the previous one) will not be selected.

The best option would be to use :nth-last-child( <nth> [ of <selector># ]? ):

.help:nth-last-child(1 of .help) > .wrapper:last-child

But support for Selectors Level 4 is still quite low...

An alternative with good support would be to use :last-of-type, but it has a limitation: Now, the element that you use for .help has to be different to the other ones used as children (direct descendant) of .cont:

body {
  font-family: monospace;
  font-size: 16px;
}

.cont {
  border: 3px solid #000;
  margin: 0 0 3px;
}

.help + .help {
  margin: 3px 0 0;
}

.foo {
  display: block;
  background: #0FF;
  margin: 3px 0 0;
  padding: 1px 6px;
}

.wrapper {
  background: #F0F;
  padding: 1px 6px;
}

.help:last-of-type > .wrapper:last-child {
  background: #FF0;
}
<div class="cont"> 
  <div class="help">
      <div class="wrapper">CCC</div>
  </div>

  <div class="help">
      <div class="wrapper">DDD</div>
  </div>

  <div class="help">
      <div class="wrapper">EEE 1</div>
      <div class="wrapper">EEE 2</div>
      <div class="wrapper">EEE 3</div>
  </div>
  
  <!-- Note I'm using a <span> here -->
  <span class="foo">Hi there.</div>
</div>

Upvotes: 2

Related Questions