Стиль первого элемента с классом

Question

Есть ли способ стилизовать только первый элемент с определенным классом? Селектор psuedo с первым ребенком, похоже, работает только с тегами.

EDIT: Не все классы имеют один и тот же родительский элемент, поэтому: first-child не является вариантом.

Answer 1

Нет первоклассного селектора.

См ответ BoltClock (в CSS3 selector :first-of-type with class name?)

Существует работа вокруг, но он не работает для меня

Answer 2

Вы можете попробовать так:

<div> 
    <p class="blue">1st</p> 
    <div class="blue">2nd</div> 
</div> 
<div> 
    <div class="blue">3rd</p> 
    <div class="blue">4th</div> 
</div> 

Так что это будет сделать только первый элемент, как голубой

Также проверьте :first-child pseudo-class

The: первый-ребенок псевдо-класс сопоставлено элемент, который является первым дочерним элементом другого элемента.

Answer 3

.class-name:nth-of-type(1)

Это должно стиль, что вы хотите

JsFiddle example

Answer 4

Это должно работать .classNamep:first-of-type

Answer 5

Вы должны перепроверить свое имя класса. Опечатка может произойти.

См. Это fiddle. Он показывает вам, что :first-child работает даже с селекторами классов. :)

Код:

<span class="spana">first</span> 
<span class="spana">second</span> 

.spana:first-child { 
    background-color: #ddd; 
} 

Answer 6

Использование селектора класса nth-child() псевдо хороший подход, это поддерживается во всех основных браузерах, включая IE9 +.

Вот пример HTML:

<div class="blue">Will be blue</div>  
<div class="blue">Will not be blue</div> 
<div class="blue">Will not be blue</div> 
<div class="blue">Will not be blue</div> 

И CSS:

.blue:nth-child(1) { 
    color: blue; 
} 

Это будет выбрать первый DIV имени класса blue. Не забывайте, что первая итерация выбирается путем передачи 1 в псевдокласс, а не 0, например массивы.

Есть и другие ключевые особенности псевдокласс класса nth-child(); а также прохождение числа, как я показал ранее, псевдокласс также поддерживает ключевые слова, такие как even или odd.

Это также может быть принято; формула может быть выражена точно, с какими элементами должен применяться стиль. Формула выражена an+b, где a - частота элементов для выбора, а b - смещение. Таким образом, формула 3n+4 будет применять стиль к четвертому элементу и каждый третий элемент за его пределами. (4, 7, 10, 13, 16 и т. Д.). Ниже приведен пример того, как это можно применить.

//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26). 
.blue:nth-child(6n+2) { 
    color: blue; 
} 

Если смещение не требуется, просто перейдите в ту же формулу, что и раньше, отбрасывая смещение в конце; проходящей в 4n является примером этого.

Надеюсь, это поможет, я чувствую, что этот псевдокласс очень мощный и в равной степени оценен множеством людей.