Che cosa significa il selettore CSS ">" (segno più grande)?

476

Per esempio:

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

Cosa significa esattamente il >segno?

css css-selectors

— Misha Moroshko
fonte

673

>è il combinatore figlio , a volte erroneamente chiamato combinatore diretto discendente. ¹

Ciò significa che il selettore div > p.some_classseleziona solo i paragrafi .some_classnidificati direttamente all'interno di a dive non i paragrafi nidificati ulteriormente all'interno.

Un'illustrazione:

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

Cosa è selezionato e cosa no:

Selezionato
Si p.some_classtrova direttamente all'interno di div, quindi viene stabilita una relazione genitore-figlio tra entrambi gli elementi.
Non selezionato
Questo p.some_classè contenuto blockquoteall'interno di div, piuttosto che su divse stesso. Sebbene questo p.some_classsia un discendente del div, non è un bambino; è un nipote.

Di conseguenza, sebbene div > p.some_classnon corrisponda a questo elemento, lo div p.some_classfarà, usando invece il combinatore discendente .

¹ _{Molte persone vanno oltre per chiamarlo "figlio diretto" o "figlio immediato", ma è del tutto superfluo (e incredibilmente fastidioso per me), perché un elemento figlio è comunque immediato per definizione , quindi significano esattamente la stessa cosa. Non esiste un "bambino indiretto".}

— BoltClock
fonte

2

+1 Si chiama davvero un selettore figlio ? Se è così, è piuttosto fuorviante. Penserei che #something asarebbe un selezionatore di bambini.

— alex,

2

@alex: sì :) #something apotrebbe significare aè un nipote o un grande nipote di #something(non tiene conto della profondità della nidificazione).

— BoltClock

12

@alex si chiama combinatore figlio , lo spazio è chiamato combinatore discendente

— robertc

33

Quando qualcuno è il figlio del nonno, abbiamo a che fare con un'istanza davvero brutta di incesto. Fortunatamente, ciò è impossibile in HTML.

— Quentin,

8

Non sento nessun laico chiamare i propri figli come figli diretti per motivi di chiarezza.

— BoltClock

41

> (maggiore di segno) è un combinatore CSS.

Un combinatore è qualcosa che spiega la relazione tra i selettori.

Un selettore CSS può contenere più di un semplice selettore. Tra i selettori semplici, possiamo includere un combinatore.

Esistono quattro diversi combinatori in CSS3:

selettore discendente (spazio)
selettore figlio (>)
selettore fratello adiacente (+)
selettore generale di pari livello (~)

Nota: < non è valido nei selettori CSS.

Per esempio:

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

Produzione:

Ulteriori informazioni sui combinatori CSS

— Premraj
fonte

developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

— Lalit Yadav

@premraj Grazie per l'eccellente spiegazione dei selettori CSS genitore-figlio!

— YCode

Cosa significa allora quando ottieni qualcosa di simile a .entry-content > * {"code" }cui è seguito .entry-content {"other code" }? Non .entry-content > *copre tutti i bambini di entry-content?

— YCode

14

Come altri citano, è un selettore figlio. Ecco il link appropriato.

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

— Dagg Nabbit
fonte

Grazie mille per il link! Ho scoperto anche i "selettori di fratelli adiacenti" lì.

— Misha Moroshko,

Troverai il supporto del browser su Sitepoint. Non funziona in IE6 se è importante per i tuoi progetti, OK ovunque. Questa risorsa è esp. utile per i fratelli, nth-child () ecc. dove il supporto è ancora incompleto

— FelipeAls

10

Corrisponde agli pelementi con la classe some_classche si trovano direttamente in a div.

— dan04
fonte

5

Tutti i ptag con classe some_classche sono figli diretti di un divtag.

— tschaible
fonte

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

Tutti i bambini diretti che stanno <p>con .some_classotterrebbero lo stile applicato a loro.

— Suraj Rawat
fonte

3

(selettore figlio) è stato introdotto in css2. div p {} seleziona tutti gli elementi p decedenti degli elementi div, mentre div> p seleziona solo gli elementi p figlio, non nipote, pronipote su così via.

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

Per ulteriori informazioni su CSS Ce [lettori e il loro utilizzo, consultare il mio blog, i selettori CSS e i selettori CSS3

— Avinash Malhotra
fonte

0

Il selettore di segno più grande (>) nei CSS significa che il selettore a destra è un discendente / figlio diretto di tutto ciò che è a sinistra.

Un esempio:

article > p { }

Significa solo lo stile di un paragrafo che segue un articolo.

— authentichigh
fonte