Селектор 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 рівня 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 : перший-тип для вибору першого елемента із заданим іменем класу.

Однак якщо цільовий елемент має попередній елемент побратимів, ви можете комбінувати заперечуючий псевдоклас 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>

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

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працює для мене, чому це ще не згадано?