Как выбрать 2-й div в 3-м и 4-м li

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

Итак, я хочу выбрать заголовки 3-го и 4-го ящиков в моем макете codepen выше и оформить их по-разному. И я хочу сделать это, используя псевдоселекторы, такие как nth-child, а не с определенным классом, идентификатором или jquery.

Это то, с чем я столкнулся, и я знаю, почему это не работает, потому что он пытается найти n-й дочерний элемент div вместо n-го дочернего элемента класса .btn_title.

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

Итак, мой вопрос: как бы вы нацелились на 3-й и 4-й 2-й div в моем списке?

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>


html css css-selectors pseudo-class
person Leon Gaban    schedule 10.12.2013    source источник

Ответы (6)


arrow_upward
4
arrow_downward

Если я правильно понял: http://codepen.io/anon/pen/khDgE

Попробуй это:

li:nth-child(2) .btn_title, li:nth-child(3) .btn_title {
   border: 4px solid #333;
   color: #b1b3b3;
}
person Antonis Grigoriadis    schedule 10.12.2013
comment
Благодарность! И спасибо всем остальным :) полностью понимаю это теперь - person Leon Gaban; 10.12.2013

arrow_upward
2
arrow_downward

nth-child нацелен на братьев и сестер — в вашем случае он пытается найти третий элемент в каждом li. Чтобы решить эту проблему, используйте nth-child для li (т. е. найдите 3-й li), затем стилизуйте его дочерний элемент.

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

Вот скрипка, демонстрирующая это. http://jsfiddle.net/wVXdX/

person Josh Lowry    schedule 10.12.2013

arrow_upward
2
arrow_downward

Для них обоих:

li:nth-child(3) div.btn_title,
li:nth-child(4) div.btn_title {
    border: 4px solid #333;
    color: #b1b3b3;
}
person Gabriel C. Troia    schedule 10.12.2013

arrow_upward
2
arrow_downward

Вы хотите стилизовать div.btn_title внутри 3-го li, а не 3-го div.btn_title внутри каждого li. Итак, вам нужен следующий селектор CSS:

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

который делает следующее:

  1. Найдите 3-й элемент списка (<li>)
  2. В этом элементе списка найдите <div> с классом btn_title.

Изменить: я вижу, вы хотите настроить таргетинг как на 3-й, так и на 4-й li, поэтому ваш селектор должен быть:

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

который в основном такой же, как и выше, но нацелен как на 3-й, так и на 4-й элементы списка.

person Nic Wortel    schedule 10.12.2013
comment
Спасибо за объяснение :) +1 - person Leon Gaban; 10.12.2013

arrow_upward
-1
arrow_downward

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

проверьте код и пример, нажмите на 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>
person Nazakat Ali    schedule 10.12.2013

arrow_upward
-1
arrow_downward

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;}
person Nazakat Ali    schedule 10.12.2013