Czy można użyć selektora CSS3, :first-of-type
aby 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>
css
css-selectors
Adam Youngers
źródło
źródło
.myclass1
Selektor wybierze każdy element.myclass1
. Selektor.myclass1 ~ .myclass1
używa ogólnego kombinatora rodzeństwa, aby wybrać każdy element z klasą,.myclass1
która jest kolejnym rodzeństwem elementu z klasą.myclass1
. Jest to wyjaśnione tutaj niezwykle szczegółowo .Wersja robocza selektorów CSS poziom 4 proponuje dodanie
of <other-selector>
gramatyki w:nth-child
selektorze . Umożliwi to wybranie n- tego dziecka pasującego do danego innego selektora: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: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.
źródło
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:
Przykład pełnego działającego kodu:
źródło
Znalazłem rozwiązanie w celach informacyjnych. z niektórych grup div wybierz pierwszą z grup dwóch div tej samej klasy
BTW, nie wiem, dlaczego
:last-of-type
działa, ale:first-of-type
nie działa.Moje eksperymenty na jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/
źródło
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.
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
źródło
Jako rozwiązanie awaryjne możesz zawinąć swoje klasy w element nadrzędny, taki jak ten:
źródło
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
źródło
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:
źródło
Po prostu
:first
działa dla mnie, dlaczego jeszcze tego nie wspomniano?źródło
:first
to pseudoklasa związana z drukowaniem.