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

Можно ли использовать селектор 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>

Источник

10 ответов

Решение

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

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

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

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

Источник

В проекте CSS Selectors Level 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, но нет видимого прогресса по любому из них.

Источник

Это не позволяет использовать селектор CSS3 :first-of-type для выбора первого элемента с заданным именем класса.

Однако, если у целевого элемента есть предыдущий одноуровневый элемент, можно объединить псевдокласс 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>

Источник

Я нашел решение для вашей справки. из некоторой группы div выберите из группы из двух одинаковых 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/

Источник

Это старая ветка, но я отвечаю, потому что она по-прежнему отображается в списке результатов поиска. Теперь, когда будущее наступило, вы можете использовать псевдо-селектор: 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

Источник

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

например:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>
Источник

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

<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>
Источник

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

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
Источник

Я нашел что-то, что работает. Если у вас есть класс побольше, который содержит что-то вроде сетки, все элементы вашего другого класса. Вы можете сделать это.

      div.col-md-4:nth-child(1).myclass{    
border: 1px solid #000;     
}
Источник

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

Источник
Другие вопросы по тегам