Selektor CSS3: pierwszy typ z nazwą klasy?

230

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>

Adam Youngers
źródło

Odpowiedzi:

336

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 .

BoltClock
źródło
7
Nie @ justNik to działa dla wielu elementów. .myclass1Selektor wybierze każdy element .myclass1. Selektor .myclass1 ~ .myclass1używa ogólnego kombinatora rodzeństwa, aby wybrać każdy element z klasą, .myclass1która jest kolejnym rodzeństwem elementu z klasą .myclass1. Jest to wyjaśnione tutaj niezwykle szczegółowo .
WebWanderer 21.04.16
świetne obejście! działało to dobrze w przypadku tej implementacji szpiegującej przewijanie za pomocą obserwatora skrzyżowań, gdzie niektóre sekcje mogą być widoczne na stronie, ale chcemy narysować pogrubioną czcionką tylko pierwszą aktywną.
zavr
45

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.

Brian Campbell
źródło
102
Tylko 10 lat i mogę z tego korzystać. Chociaż projekt, który chciałbym wykorzystać, musi zostać zrealizowany jutro.
Lajos Meszaros
1
: usunięto nth-match () na rzecz nowych funkcji nth-child (), które nie są jeszcze dobrze obsługiwane: caniuse.com/#feat=css-nth-child-of
nabrown
@ nabrown78 Dzięki za zgłoszenie, zaktualizowałem odpowiedź, aby była aktualna.
Brian Campbell
19

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>

łódzkie
źródło
9

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/

Konstantin
źródło
Nie działa to zgodnie z wymaganiami, co widać już ze skrzypce. Jedyne, co to robi, to nie wybierać ostatniego diva, jeśli nie ma klasy.
Marten Koetsier,
6

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

TDavison
źródło
6
Tak, nie sądzę, że to działa, przynajmniej nie w Chrome ... jsfiddle.net/YWY4L/91
Adam Youngers
2
Co masz na myśli mówiąc „teraz, gdy przyszłość nadeszła”? Działa to tylko w Safari w momencie pisania.
Alejandro García Iglesias
4

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>
Gediminas Bivainis
źródło
1

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>
adrianTNT
źródło
0

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>
Jonathan.
źródło
-5

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

Eduard Ge
źródło
3
:firstto pseudoklasa związana z drukowaniem.
user247702