Есть ли способ выбрать конкретный элемент с классом?

Question

Мне нужно применить определенный стиль только к конкретному экземпляру класса.

Так ... скажем, я следующий в моем HTML:

<div class="dog">Text</div> 
<div class="dog">More text</div> 
<div class="dog">Even more text</div> 

Есть селектор или что-то я могу использовать, чтобы применить небольшое изменение на второй DIV с классом «собака», но а не два других?

Заранее благодарен!

Answer 1

Вы можете использовать селектор :nth-child().

.dog:nth-child(2) { 
 
    color: red; 
 
}

<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div>

---

Если вы хотите выбрать все div с с классом .dog, но первые и последние div ы вы могли сочетающие :not(), :first-of-type и :last-of-type селекторов (.dog:not(:first-of-type):not(:last-of-type)).

.dog:not(:first-of-type):not(:last-of-type) { 
 
    color: red; 
 
}

<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div> 
 
<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div> 
 
<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div>

Answer 2

добавить второй класс, как этот <div class="dog second">More text</div> ваш CSS, например, div.dog.second {color:red;}

Answer 3

вы можете использовать селектор экв из JQuery: http://api.jquery.com/eq-selector/

Если вы хотите, чтобы избежать JQuery и javascript, вы можете взглянуть на: nth-child() псевдоселектор, но есть CSS3, а CSS3 не поддерживается в старой брови ГКР.

Answer 4

Если вы укажете один элемент id и затем укажите его в своей таблице стилей, он должен работать.

<div class="dog" id="altered"/>