Target multiple <div> CSS

Question

I've got this HTML structure and I want to target divs in CSS like this :

<div></div>
<div></div>
<div></div> 
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div></div> <!-- SPECIFIC STYLE --> 
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->

I don't know how to target these divs in CSS, using nth-child ?

Edit: No using classes

Please show us what CSS you have tried so we can highlight where you are going wrong. — Hidden Hobbes
– Hidden Hobbes, Commented Mar 14, 2017 at 13:01

Leon Freire · Accepted Answer · 2017-03-14 13:01:29Z

1

Here you go.

div:nth-child(4),
div:nth-child(5),
div:nth-child(6),
div:nth-child(11),
div:nth-child(12),
div:nth-child(13) {
    /*your style*/
}

Note: This solution, of course, is only useful if you can't add classes to the specific divs in question. Also, it would apply to any sequence of divs in your site. So, you should probably point a div id for a parent before the div part, if you choose to use this method.

answered Mar 14, 2017 at 13:01

Leon Freire

8182 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ammar Ahmed · Accepted Answer · 2017-03-14 13:10:42Z

1

This is running code try this

div:nth-child(4){
color:red;
}
div:nth-child(5){
color:blue;
}
div:nth-child(6){
color:white;
}
div:nth-child(11){
color:orange;
}
div:nth-child(12){
color:pink;
}
div:nth-child(13){
color:yellow;
}

<div>no style</div>
<div>no style</div>
<div>no style</div> 
<div>red</div> <!-- SPECIFIC STYLE -->
<div>blue</div> <!-- SPECIFIC STYLE -->
<div>white</div> <!-- SPECIFIC STYLE -->
<div>no style</div>
<div>no style</div> 
<div>no style</div> 
<div>no style</div>
<div>orange</div> <!-- SPECIFIC STYLE --> 
<div>pink</div> <!-- SPECIFIC STYLE -->
<div>yellow</div> <!-- SPECIFIC STYLE -->

answered Mar 14, 2017 at 13:10

Ammar Ahmed

1268 bronze badges

Comments

Ram · Accepted Answer · 2017-03-14 13:01:50Z

0

You can add a class to the div you need to style. The sample is given below:

<div></div>
<div></div>
<div></div> 
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div class="specific_style"></div> <!-- SPECIFIC STYLE --> 
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->

and in CSS update by using the class like .specific_style { //styles }

Hope This is helpful

answered Mar 14, 2017 at 13:01

Ram

4132 gold badges5 silver badges18 bronze badges

Comments

Serge Inácio · Accepted Answer · 2017-03-14 13:09:30Z

0

Something like this?

div {
  float: left;
  width: 50px;
  height: 50px;
  border: solid 1px black;
  background-color: #babafe;
}

.your-style {
  background-color: #bafeba;
}

<div></div>
<div></div>
<div></div> 
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div class="your-style"></div> <!-- SPECIFIC STYLE --> 
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->

answered Mar 14, 2017 at 13:09

Serge Inácio

1,3809 silver badges29 bronze badges

Collectives™ on Stack Overflow

Target multiple <div> CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related