CSS3 селектор: первый в своем роде с именем класса?

Question

Можно ли использовать селектор CSS3 :first-of-type, чтобы выбрать первый элемент с заданным именем класса?Мой тест не был успешным, поэтому я думаю, что это не так?

Код (http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Answer 1

Нет, невозможно использовать только один селектор. Псевдокласс :first-of-type выбирает первый элемент его типа (div, p и т. Д.). Использование селектора класса (или селектора типа) с этим псевдоклассом означает выбрать элемент, если он имеет заданный класс (или имеет заданный тип) и является первым из его типа среди своих братьев и сестер. .

К сожалению, CSS не предоставляет селектора :first-of-class, который выбирает только первое вхождение класса. В качестве обходного пути вы можете использовать что-то вроде этого:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Пояснения и иллюстрации для обходного пути даны здесь и здесь .

Answer 2

В черновом наборе CSS селекторов 4-го уровня предлагается добавить грамматику of <other-selector> в селектор :nth-child .Это позволит вам выбрать n -го потомка, соответствующего данному другому селектору:

:nth-child(1 of p.myclass) 

В предыдущих черновиках использовался новый псевдокласс :nth-match()Таким образом, вы можете увидеть этот синтаксис в некоторых обсуждениях этой функции:

:nth-match(1 of p.myclass)

Это теперь реализовано в WebKit и, таким образом, доступно в Safari, но, похоже, это единственный браузер, который поддерживает его .Есть заявки, поданные для его реализации Blink (Chrome) , Gecko (Firefox) и запрос на его реализацию в Edge , но никакого видимого прогресса ни по одномуиз них.

Answer 3

Это , а не . Можно использовать селектор CSS3 : первый тип , чтобы выбрать первый элемент с заданным именем класса.

Однако, еслиу целевого элемента есть предыдущий родной элемент, можно объединить псевдокласс CSS * * отрицание * и соседние селекторы , чтобы сопоставить элемент, который не сразу имеет предыдущий элемент, сто же имя класса:

:not(.myclass1) + .myclass1

Пример полного рабочего кода:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Answer 4

Я нашел решение для вашей справки.из нескольких групп div выберите из группы из двух одинаковых классов первый

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

Кстати, я не знаю, почему :last-of-type работает, но :first-of-type не работает.* Мои эксперименты на jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Answer 5

Это старая ветка, но я отвечаю, потому что она по-прежнему отображается высоко в списке результатов поиска.Теперь, когда будущее наступило, вы можете использовать псевдо-селектор: nth-child.

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

Псевдо-селектор: nth-child является мощным - скобки принимают формулы и числа.*

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 6

В качестве альтернативного решения вы можете обернуть ваши классы в родительский элемент следующим образом:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

Answer 7

Не знаю, как это объяснить, но сегодня я столкнулся с чем-то похожим.Невозможно установить .user:first-of-type{}, пока .user:last-of-type{} работает нормально.Это было исправлено после того, как я поместил их в div без каких-либо классов или стилей:

Answer 8

Просто :first работает для меня, почему это еще не упомянуто?