CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
Leon Gaban
Leon Gaban

Reputation: 39034

How to select the 2nd div in the 3rd and 4th li

http://codepen.io/leongaban/pen/migpC

So I want to select the 3rd and 4th Box titles in my codepen layout above and style them differently. And I want to accomplish this using pseudo selectors like nth-child and not with a specific class, id or jquery.

This is what I ended up with, and I know why it's not working, because it's trying to find the nth-child of the div, instead of the nth-child of the .btn_title class

div.btn_title:nth-child(3) {
    border: 4px solid #333;
    color: #b1b3b3;
}

So my question is, how would you target the 3rd and 4th 2nd div in my list?

HTML

<ul>
<li>
  <div id="box1" class="web_btn"></div>
  <div class="btn_title">Box 1</div>
</li>
<li>
  <div id="box2" class="web_btn"></div>
  <div class="btn_title">Box 2</div>
</li>
<li>
  <div id="box3" class="web_btn"></div>
  <div class="btn_title">Box 3</div>
</li>
<li>
  <div id="box4" class="web_btn"></div>
  <div class="btn_title">Box 4</div>
</li>

Upvotes: 1

Views: 5727

Answers (6)

Nazakat Ali
Nazakat Ali

Reputation: 1

CSS

body {
  font-family: arial;
}

#web_sync_options > li {float: left; list-style: none;}
#web_sync_options > li {margin: 0 10px 10px 0;}
#web_sync_options > li > div {margin: 0 0 10px 0; width: 200px; height: 90px; border: 2px solid #e3e3e3; cursor: pointer;}
#web_sync_options > li div:nth-child(2) {height: 20px;}
#web_sync_options > li:nth-child(2) div:nth-child(2) {background:#FF0;}
#web_sync_options > li:nth-child(3) div:nth-child(1), li:nth-child(4) div:nth-child(1) {background: #F00;}
#web_sync_options > li div:nth-child(2) {text-align: center;}

Upvotes: -1

Nazakat Ali
Nazakat Ali

Reputation: 1

http://codepen.io/anon/pen/yGsfI

check code and example click on URL

<div>
  <ul id="web_sync_options">
<li>
  <div></div>
  <div>Box 1</div>
</li>
<li>
  <div></div>
  <div>Box 2</div>
</li>
<li>
  <div></div>
  <div>Box 3</div>
</li>
<li>
  <div></div>
  <div>Box 4</div>
</li>
</ul>
</div>

Upvotes: -1

Nic Wortel
Nic Wortel

Reputation: 11423

You are looking to style the div.btn_title inside the 3rd li, not the 3rd div.btn_title inside every li. So you need the following CSS selector:

li:nth-child(3) div.btn_title {
    /* your CSS rules go here */
}

which does the following:

  1. Find the 3rd list item (<li>)
  2. Within that list item, find the <div> with class btn_title.

Edit: I see you want to target both the 3rd and the 4th li, so your selector should actually be:

li:nth-child(3) div.btn_title,
li:nth-child(4) div.btn_title {
    /* your CSS rules go here */
}

which is basically the same as above, but targets both the 3rd and the 4th list items.

Upvotes: 2

Gabriel C. Troia
Gabriel C. Troia

Reputation: 3340

For both of them:

li:nth-child(3) div.btn_title,
li:nth-child(4) div.btn_title {
    border: 4px solid #333;
    color: #b1b3b3;
}

Upvotes: 2

Antonis Grigoriadis
Antonis Grigoriadis

Reputation: 2080

If I understood correctly: http://codepen.io/anon/pen/khDgE

Try this:

li:nth-child(2) .btn_title, li:nth-child(3) .btn_title {
   border: 4px solid #333;
   color: #b1b3b3;
}

Upvotes: 4

Josh Lowry
Josh Lowry

Reputation: 447

nth-child targets siblings - in your case, it's trying to find the third element in each li. To solve this, use nth-child on the li (ie. find the 3rd li), then style the child of that.

li:nth-child(3) div.btn_title {
    border: 4px solid #333;
    color: #b1b3b3;
}

Here is a fiddle demonstrating this. http://jsfiddle.net/wVXdX/

Upvotes: 2

Related Questions