Selektor CSS3: pierwszy typ z nazwą klasy?

Czy można użyć selektora CSS3, :first-of-typeaby wybrać pierwszy element o danej nazwie klasy? Mój test się nie powiódł, więc myślę, że nie?

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

Nie, nie można użyć tylko jednego selektora. :first-of-typePseudoklasa wybiera pierwszy element jego typu ( div, pitp). Użycie selektora klasy (lub selektora typu) z tą pseudoklasą oznacza wybranie elementu, jeśli ma on daną klasę (lub należy do danego typu) i jest pierwszym tego typu spośród rodzeństwa.

Niestety, CSS nie zapewnia :first-of-classselektora, który wybiera tylko pierwsze wystąpienie klasy. Aby obejść ten problem, możesz użyć czegoś takiego:

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

Objaśnienia i ilustracje dotyczące tego obejścia podano tutaj i tutaj .

Wersja robocza selektorów CSS poziom 4 proponuje dodanie of <other-selector>gramatyki w :nth-childselektorze . Umożliwi to wybranie n- tego dziecka pasującego do danego innego selektora:

:nth-child(1 of p.myclass) 

Poprzednie wersje robocze używały nowej pseudoklasy :nth-match(), więc możesz zobaczyć tę składnię w niektórych dyskusjach na temat tej funkcji:

:nth-match(1 of p.myclass)

Zostało to teraz zaimplementowane w WebKit i dlatego jest dostępne w Safari, ale wydaje się, że jest to jedyna przeglądarka, która go obsługuje . Zgłoszono zgłoszenia dotyczące wdrożenia Blink (Chrome) , Gecko (Firefox) oraz prośbę o wdrożenie go w Edge , ale nie widać żadnego postępu w żadnym z nich.

To jest nie możliwe użycie selektora CSS3 : first-of-type , aby wybrać pierwszy element o podanej nazwie klasy.

Jeśli jednak element docelowy ma rodzeństwo poprzedniego elementu, można połączyć pseudoklasę CSS negacji i sąsiednie selektory rodzeństwa, aby dopasować element, który nie ma natychmiast poprzedniego elementu o tej samej nazwie klasy:

:not(.myclass1) + .myclass1

Przykład pełnego działającego kodu:

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>

Znalazłem rozwiązanie w celach informacyjnych. z niektórych grup div wybierz pierwszą z grup dwóch div tej samej klasy

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

BTW, nie wiem, dlaczego :last-of-typedziała, ale :first-of-typenie działa.

Moje eksperymenty na jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

To jest stary wątek, ale odpowiadam, ponieważ wciąż pojawia się wysoko na liście wyników wyszukiwania. Teraz, gdy nadeszła przyszłość, możesz użyć pseudo-selektora: nth-child.

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

Pseudoselektor: n-dziecko jest potężny - w nawiasach akceptowane są zarówno formuły, jak i liczby.

Więcej tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Jako rozwiązanie awaryjne możesz zawinąć swoje klasy w element nadrzędny, taki jak ten:

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

Nie jestem pewien, jak to wyjaśnić, ale dzisiaj spotkałem coś podobnego. Nie można ustawić, .user:first-of-type{}gdy .user:last-of-type{}działa dobrze. Zostało to naprawione po tym, jak zapakowałem je w div bez żadnej klasy ani stylu:

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>

Możesz to zrobić, wybierając każdy element klasy, który jest rodzeństwem tej samej klasy, i odwracając go, który wybierze prawie każdy element na stronie, więc musisz ponownie wybrać klasę.

na przykład:

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

Po prostu :firstdziała dla mnie, dlaczego jeszcze tego nie wspomniano?