How to target a specific div out of 4 divs with the same class with CSS

Question

How do I target the 4th div (with class .col-sm-3) with CSS in following example?

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
    </div> <!--/.row-->
   </div> <!--/.container-->
  </div> <!--/#footer-->

Thank you!

What have you tried? Are you only looking for the fourth occurrence of a div with the class `col-sm-3`, or just the fourth div child of `div.row`? Could there be other divs between the divs you've shown? — j08691, Apr 06 '16 at 17:13
Possible duplicate of [How can I get the second child using CSS?](http://stackoverflow.com/questions/5664773/how-can-i-get-the-second-child-using-css) — Zach Saucier, Apr 06 '16 at 17:21

score 1 · Answer 1 · answered Apr 06 '16 at 17:15

1

You could try:

 .col-sm-3:nth-child(4){}

answered Apr 06 '16 at 17:15

Agu V

2,091
4
25
40

2

You should use a more reputable source like MDN or W3 rather than W3Schools which is prone to errors – Zach Saucier Apr 06 '16 at 17:17

dors · Accepted Answer · 2016-04-06T17:18:57.963

0

Use

.col-sm-3:last-child {}

or

.col-sm-3:nth-child(4) {}

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

edited Apr 06 '16 at 17:18

answered Apr 06 '16 at 17:17

dors

1,152
11
19

1

You should use a more reputable source like MDN or W3 rather than W3Schools which is prone to errors – Zach Saucier Apr 06 '16 at 17:17
@Zach Saucier - Changed it. – dors Apr 06 '16 at 17:20

How to target a specific div out of 4 divs with the same class with CSS

2 Answers2