Co oznacza selektor CSS „>” (znak większy niż)?

475

Na przykład:

div > p.some_class {
  /* Some declarations */
}

Co dokładnie oznacza >znak?

css css-selectors Misza Moroszko
źródło

Odpowiedzi:

672

>jest kombinatorem dzieci , czasami mylnie nazywanym kombinatorem bezpośredniego potomka. 1

Oznacza to, że selektor div > p.some_classwybiera tylko te akapity, .some_classktóre są zagnieżdżone bezpośrednio w a div, a nie żadne akapity, które są zagnieżdżone dalej.

Ilustracja:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Co jest wybrane, a co nie:

  1. Wybrane
    Znajduje p.some_classsię bezpośrednio wewnątrz div, dlatego między obydwoma elementami nawiązuje się relacja rodzic-dziecko.

  2. Niewybrane
    Jest p.some_classto zawarte w blockquoteobrębie div, a nie w divsamym sobie. Chociaż p.some_classjest to potomek div, nie jest to dziecko; to wnuk.

    W związku z tym, chociaż div > p.some_classnie będzie pasował do tego elementu, div p.some_classużyje zamiast tego kombinatora potomnego.

1 Wiele osób idzie dalej, nazywając to „bezpośrednim dzieckiem” lub „bezpośrednim dzieckiem”, ale jest to całkowicie niepotrzebne (i niezwykle denerwujące dla mnie), ponieważ element potomny jest z definicji natychmiastowy , więc mają na myśli dokładnie to samo. Nie ma czegoś takiego jak „dziecko pośrednie”.

BoltClock
źródło
2
+1 Czy to naprawdę nazywa się selektorem dzieci ? Jeśli tak, jest to dość mylące. Myślałbym, że #something abędzie selektorem dzieci.
alex
2
@alex: tak :) #something amoże oznaczać, że ajest wnukiem lub wnukiem #something(nie bierze pod uwagę głębokości zagnieżdżenia).
BoltClock
12
@alex nazywa się kombinatorem potomnym , przestrzeń nazywa się kombinatorem
potomnym
33
Kiedy ktoś jest dzieckiem dziadka, mamy do czynienia z naprawdę okropnym kazirodztwem. Na szczęście jest to niemożliwe w HTML.
Quentin
8
Nie słyszę, aby świeccy nazywali swoje dzieci swoimi bezpośrednimi dziećmi dla zachowania przejrzystości.
BoltClock
41

> (znak większy niż) to kombinator CSS.

Kombinator to coś, co wyjaśnia związek między selektorami.

Selektor CSS może zawierać więcej niż jeden prosty selektor. Pomiędzy prostymi selektorami możemy dołączyć kombinator.

Istnieją cztery różne kombinatory w CSS3:

  1. selektor potomka (spacja)
  2. selektor potomny (>)
  3. sąsiedni selektor rodzeństwa (+)
  4. Ogólny selektor rodzeństwa (~)

Uwaga: < nie działa w selektorach CSS.

wprowadź opis zdjęcia tutaj

Na przykład: 

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Wynik:

wprowadź opis zdjęcia tutaj

Więcej informacji o kombinatorach CSS

Premraj
źródło
developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj Dziękujemy za doskonałe wyjaśnienie selektorów css typu rodzic-dziecko!
YCode
Co to znaczy, kiedy dostajesz coś takiego, po .entry-content > * {"code" }czym następuje .entry-content {"other code" }? Nie .entry-content > *obejmuje wszystkich dzieci entry-content?
YCode
14

Jak wspominają inni, jest to selektor podrzędny. Oto odpowiedni link.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Dagg Nabbit
źródło
Dziękuję bardzo za link! Odkryłem tam również „sąsiadujące selektory rodzeństwa”.
Misha Moroshko
Wsparcie przeglądarki znajdziesz w Sitepoint. Nie działa w IE6, jeśli ma to znaczenie dla twoich projektów, OK wszędzie indziej. Ten zasób jest esp. przydatne dla rodzeństwa
,:
10

Dopasowuje pelementy z klasą, some_classktóre znajdują się bezpośrednio pod div.

dan04
źródło
5

Wszystkie pznaczniki z klasą, some_classktóre są bezpośrednimi elementami potomnymi divznacznika.

tschaible
źródło
4
HTML 
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
css 
div > p.some_class{
    color:red;
}

Wszystkie bezpośrednie dzieci, które są <p>z .some_classtym, zastosują do nich styl.

suraj rawat
źródło
3

(selektor potomny) został wprowadzony w css2. div p {} zaznacz wszystkie elementy p decedent elementów div, podczas gdy div> p wybiera tylko elementy potomne p, a nie grand child, great grand child itd.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Aby uzyskać więcej informacji na temat CSS Ce [lektorów i ich zastosowania, sprawdź mój blog, selektory css i selektory css3

Avinash Malhotra
źródło
0

Większy selektor znaku (>) w CSS oznacza, że ​​selektor po prawej jest bezpośrednim potomkiem / dzieckiem tego, co jest po lewej.

Przykład:

article > p { }

Oznacza tylko styl akapitu, który pojawia się po artykule.

autentichigh
źródło