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

Ответ 1

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

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

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

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

Ответ 2

В проекте 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, но никакого видимого прогресса ни на одном из них.

Ответ 3

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

Ответ 4

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

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/

Ответ 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

Ответ 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>

Ответ 7

Не знаю, как это объяснить, но сегодня я столкнулся с чем-то подобным. .user:first-of-type{} установить .user:first-of-type{} while .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>

Ответ 8

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

например:

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

Ответ 9

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