Selektor CSS dla pierwszego elementu z klasą

Mam kilka elementów o nazwie klasy red, ale nie mogę wybrać pierwszego elementu za class="red"pomocą następującej reguły CSS:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

Co jest nie tak w tym selektorze i jak go naprawić?

Dzięki komentarzom zorientowałem się, że element musi być pierwszym dzieckiem jego rodzica, aby zostać wybranym, co nie jest moim przypadkiem. Mam następującą strukturę i ta reguła zawodzi, jak wspomniano w komentarzach:

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Jak mogę skierować pierwsze dziecko z klasą red?

Jest to jeden z najbardziej znanych przykładów nieporozumień autorów dotyczących sposobu :first-childdziałania. Wprowadzony w CSS2 The :first-childpseudoklasa oznacza pierwszego dziecka jego rodzica . Otóż ​​to. Istnieje bardzo powszechne nieporozumienie, że wybiera on dowolny element potomny, który jako pierwszy spełnia warunki określone przez resztę selektora złożonego. Ze względu na pracę w sposób selektorów (patrz tutaj o wyjaśnienie), że nie jest po prostu nieprawda.

Poziom selektorów 3 wprowadza :first-of-typepseudoklasę , która reprezentuje pierwszy element wśród rodzeństwa tego typu elementu. Ta odpowiedź wyjaśnia ilustracją różnicę między :first-childi :first-of-type. Jednak, podobnie jak w przypadku :first-child, nie uwzględnia żadnych innych warunków ani atrybutów. W HTML typ elementu jest reprezentowany przez nazwę znacznika. W pytaniu tym typem jest p.

Niestety, nie ma podobnej :first-of-classpseudoklasy do dopasowania pierwszego elementu potomnego danej klasy. Jednym z obejść tego problemu, które opracowaliśmy wspólnie z Leą Verou (choć całkowicie niezależnie), jest zastosowanie pożądanych stylów do wszystkich elementów w tej klasie:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... następnie „cofnij” style elementów z klasą następującą po pierwszej , używając ogólnego kombinatora rodzeństwa~ w nadrzędnej regule:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Teraz tylko pierwszy element z class="red"będzie miał obramowanie.

Oto przykład zastosowania reguł:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Nie stosuje się żadnych zasad; żadna ramka nie jest renderowana.
   Ten element nie ma klasy red, więc został pominięty.

2. Stosowana jest tylko pierwsza reguła; renderowana jest czerwona ramka.
   Ten element ma klasę red, ale nie jest poprzedzony żadnymi elementami z klasą redw jej rodzicu. Zatem druga zasada nie jest stosowana, tylko pierwsza, a element zachowuje swoją granicę.

3. Obie zasady są stosowane; żadna ramka nie jest renderowana.
   Ten element ma klasę red. Poprzedza go także co najmniej jeden inny element z klasą red. W ten sposób stosowane są obie reguły, a druga borderdeklaracja zastępuje pierwszą, a tym samym „cofając” ją, że tak powiem.

Jako bonus, mimo że został wprowadzony w Selectors 3, ogólny kombinator rodzeństwa jest w rzeczywistości dość dobrze obsługiwany przez IE7 i nowsze, w przeciwieństwie :first-of-typedo tych, :nth-of-type()które są obsługiwane tylko przez IE9. Jeśli potrzebujesz dobrego wsparcia przeglądarki, masz szczęście.

W rzeczywistości fakt, że kombinator rodzeństwa jest jedynym ważnym elementem tej techniki i ma tak niesamowite wsparcie przeglądarki, czyni tę technikę bardzo wszechstronną - możesz ją dostosować do filtrowania elementów innymi rzeczami, poza selektorami klas:

• Możesz użyć tego do obejścia :first-of-typew IE7 i IE8, po prostu podając selektor typu zamiast selektora klasy (ponownie, więcej o jego niewłaściwym użyciu tutaj w dalszej części):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }

• Możesz filtrować według selektorów atrybutów lub innych prostych selektorów zamiast klas.

• Możesz także łączyć tę nadrzędną technikę z pseudoelementami, nawet jeśli pseudoelementy technicznie nie są prostymi selektorami.

Pamiętaj, że aby to zadziałało, musisz wcześniej wiedzieć, jakie będą domyślne style dla pozostałych elementów rodzeństwa, abyś mógł zastąpić pierwszą regułę. Dodatkowo, ponieważ wiąże się to z nadpisywaniem reguł w CSS, nie można osiągnąć tego samego za pomocą jednego selektora do użycia z Selectors API lub lokalizatorami Selenium CSS.

Warto wspomnieć, że Selektory 4 wprowadzają rozszerzenie :nth-child()notacji (pierwotnie zupełnie nowa pseudoklasa zwana :nth-match()), które pozwoli ci użyć czegoś :nth-child(1 of .red)w miejsce czegoś hipotetycznego .red:first-of-class. Ponieważ jest to stosunkowo nowa propozycja, nie ma wystarczającej liczby interoperacyjnych implementacji, aby można ją było zastosować w zakładach produkcyjnych. Mam nadzieję, że wkrótce się to zmieni. Tymczasem zaproponowane przeze mnie obejście powinno działać w większości przypadków.

Należy pamiętać, że ta odpowiedź zakłada, że ​​pytanie szuka każdego pierwszego elementu potomnego, który ma daną klasę. Nie ma ani pseudoklasy, ani nawet ogólnego rozwiązania CSS dla n-tego dopasowania złożonego selektora w całym dokumencie - to, czy rozwiązanie istnieje, zależy w dużej mierze od struktury dokumentu. jQuery zapewnia :eq(), :first, :lasti więcej do tego celu, ale znowu pamiętać, że działają one bardzo różnie od :nth-child()et al . Korzystając z interfejsu API Selektorów, możesz użyć pierwszego, document.querySelector()aby uzyskać pierwsze dopasowanie:

var first = document.querySelector('.home > .red');

Lub użyj document.querySelectorAll()z indeksem, aby wybrać dowolne określone dopasowanie:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Chociaż .red:nth-of-type(1)rozwiązanie w pierwotnie zaakceptowanej odpowiedzi Philipa Daubmeiera działa (pierwotnie napisane przez Martyn, ale od tego czasu usunięte), nie zachowuje się tak, jak byś tego oczekiwał.

Na przykład, jeśli chcesz tylko wybrać pw oryginalnym znaczniku:

<p class="red"></p>
<div class="red"></div>

... wtedy nie możesz użyć .red:first-of-type(odpowiednika .red:nth-of-type(1)), ponieważ każdy element jest pierwszym (i jedynym) jednym z jego typów ( pi divodpowiednio), więc oba zostaną dopasowane przez selektor.

Gdy pierwszy element pewnej klasy jest również pierwszym tego typu , pseudoklasa będzie działać, ale dzieje się tak tylko przez przypadek . To zachowanie zostało wykazane w odpowiedzi Filipa. Gdy tylko włożysz element tego samego typu przed tym elementem, selektor zawiedzie. Biorąc zaktualizowany znacznik:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Zastosowanie reguły z .red:first-of-typebędzie działać, ale gdy dodasz inną pbez klasy:

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... selektor natychmiast zawiedzie, ponieważ pierwszy .redelement jest teraz drugim p elementem.

:first-childSelektor jest przeznaczony, jak sama nazwa mówi, aby wybrać pierwsze dziecko znacznika macierzystego. Dzieci muszą być osadzone w tym samym znaczniku nadrzędnym. Twój dokładny przykład zadziała (właśnie wypróbowałem tutaj ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Może umieściłeś tagi w różnych tagach nadrzędnych? Czy Twoje tagi klasy są rednaprawdę pierwszymi tagami nadrzędnymi?

Zauważ też, że nie dotyczy to tylko pierwszego takiego znacznika w całym dokumencie, ale za każdym razem, gdy jest zawijany nowy rodzic, na przykład:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

firsti wtedy thirdbędzie czerwony.

Aktualizacja:

Nie wiem, dlaczego Martyn usunął swoją odpowiedź, ale miał rozwiązanie, :nth-of-typeselektor:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Kredyty dla Martyn . Więcej informacji na przykład tutaj . Pamiętaj, że jest to selektor CSS 3, dlatego nie wszystkie przeglądarki go rozpoznają (np. IE8 lub starszy).

Poprawna odpowiedź to:

.red:first-child, :not(.red) + .red { border:5px solid red }

Część I: Jeśli element jest pierwszy od swojego rodzica i ma klasę „czerwoną”, powinien uzyskać granicę.
Część II: Jeżeli element „.red” nie jest pierwszy względem elementu nadrzędnego, ale natychmiast podąża za elementem bez klasy „.red”, zasługuje również na honor tej granicy.

Fiddle lub tak się nie stało.

Odpowiedź Philipa Daubmeiera, mimo że została zaakceptowana, jest nieprawidłowa - patrz załączone skrzypce.
Odpowiedź BoltClock działałaby, ale niepotrzebnie definiuje i zastępuje style
(szczególnie problem, w którym inaczej dziedziczy inną granicę - nie chcesz deklarować innej granicy: brak)

EDYCJA: W przypadku, gdy kilkakrotnie „czerwony” następuje po kolorze innym niż czerwony, każda „pierwsza” czerwień otrzyma ramkę. Aby temu zapobiec, trzeba użyć odpowiedzi BoltClock. Zobacz skrzypce

możesz użyć first-of-typelubnth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Powyższe odpowiedzi są zbyt złożone.

.class:first-of-type { }

Spowoduje to wybranie pierwszego typu klasy. Źródło MDN

Aby dopasować selektor, element musi mieć nazwę klasy redi musi być pierwszym dzieckiem swojego rodzica.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

Ponieważ pozostałe odpowiedzi obejmować co złego z nią, postaram drugą połowę, jak to naprawić. Niestety nie wiem, czy masz tutaj rozwiązanie oparte wyłącznie na CSS , a przynajmniej nie o tym myślę . Istnieją jednak inne opcje ....

1. Przypisuj firstklasę do elementu podczas jego generowania, w następujący sposób:

   <p class="red first"></p>
   <div class="red"></div>

   CSS:

   .first.red {
     border:5px solid red;
   }

   Ten CSS dopasowuje tylko elementy do obu first i redklas.

2. Alternatywnie, wykonaj to samo w JavaScript, na przykład oto jQuery, którego byś użył do tego, używając tego samego CSS jak powyżej:

   $(".red:first").addClass("first");

Mam to w moim projekcie.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Zgodnie z zaktualizowanym problemem

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Co powiesz na

.home span + .red{
      border:1px solid red;
    }

Spowoduje to wybranie klasy domu , następnie rozpiętość elementu i wreszcie wszystkie elementy .red które zostaną umieszczone bezpośrednio za elementami rozpiętości.

Odniesienie: http://www.w3schools.com/cssref/css_selectors.asp

Możesz użyć n-tego typu (1), ale upewnij się, że witryna nie musi obsługiwać IE7 itp. Jeśli tak jest, użyj jQuery, aby dodać klasę ciała, a następnie znajdź element za pośrednictwem klasy treści IE7, a następnie nazwę elementu, a następnie dodaj w stylu n-tego dziecka.

Możesz zmienić kod na taki, aby działał

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

To spełni twoje zadanie

.home span + .red{
      border:3px solid green;
    }

Oto odniesienie CSS od SnoopCode na ten temat.

Używam poniżej CSS, aby mieć obraz tła dla listy ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Spróbuj tego :

    .class_name > *:first-child {
        border: 1px solid red;
    }

Z jakiegoś powodu żadna z powyższych odpowiedzi nie dotyczyła przypadku prawdziwego pierwszego i jedynego pierwszego dziecka rodzica.

#element_id > .class_name:first-child

Wszystkie powyższe odpowiedzi zakończą się niepowodzeniem, jeśli chcesz zastosować styl tylko do elementu podrzędnego pierwszej klasy w tym kodzie.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Wypróbuj to proste i skuteczne

 .home > span + .red{
      border:1px solid red;
    }

Uważam, że przy użyciu względnego selektora + do wybierania elementów umieszczonych bezpośrednio po nim działa tutaj najlepiej (jak mało sugerowało wcześniej).

W tym przypadku można również użyć tego selektora

.home p:first-of-type

ale jest to selektor elementów, a nie klasa.

Tutaj masz ładną listę selektorów CSS: https://kolosek.com/css-selectors/

Wypróbuj to rozwiązanie:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Link CodePen