Селектор 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>

Нет, невозможно использовать только один селектор. :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

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

<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>

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

например:

<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>

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