Was bedeutet der CSS-Selektor „>“ (Größer als Vorzeichen)?

476

Zum Beispiel:

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

Was genau bedeutet das >Zeichen?

css css-selectors Mischa Moroshko
quelle

Antworten:

673

>ist der Kinderkombinator , der manchmal fälschlicherweise als direkter Nachkommenkombinator bezeichnet wird. 1

Das bedeutet, dass der Selektor div > p.some_classnur Absätze auswählt .some_class, die direkt in a verschachtelt sinddiv , und keine Absätze, die weiter darin verschachtelt sind.

Eine Illustration:

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

Was ist ausgewählt und was nicht:

  1. Ausgewählt
    Dies p.some_classbefindet sich direkt innerhalb von div, daher wird eine Eltern-Kind-Beziehung zwischen beiden Elementen hergestellt.

  2. Nicht gewählt
    Dies p.some_classwird durch ein enthaltenes blockquotein dem div, anstatt das divselbst. Obwohl dies p.some_classein Nachkomme von ist div, ist es kein Kind; Es ist ein Enkelkind.

    Folglich div > p.some_classwird dieses Element zwar nicht übereinstimmen, es div p.some_classwird jedoch stattdessen der Nachkommen-Kombinator verwendet.

1 Viele Leute gehen weiter, um es "direktes Kind" oder "unmittelbares Kind" zu nennen, aber das ist völlig unnötig (und für mich unglaublich ärgerlich), weil ein untergeordnetes Element per Definition sowieso unmittelbar ist und sie genau dasselbe bedeuten. Es gibt kein "indirektes Kind".

BoltClock
quelle
2
+1 Wird es wirklich als Kinderselektor bezeichnet ? Wenn ja, ist das ziemlich irreführend. Ich hätte gedacht, #something awäre ein Kinderwähler.
Alex
2
@alex: ja :) #something akönnte bedeuten, dass aes sich um ein Enkelkind oder ein Urenkelkind handelt #something(die Schachteltiefe wird nicht berücksichtigt).
BoltClock
12
@alex es heißt der Kind Kombinator , der Raum heißt der absteigende Kombinator
Robertc
33
Wenn jemand das Kind seiner Großeltern ist, haben wir es mit einem wirklich bösen Inzest zu tun. Glücklicherweise ist das in HTML unmöglich.
Quentin
8
Ich höre keine Laien, die ihre Kinder aus Gründen der Klarheit ihre direkten Kinder nennen.
BoltClock
41

> (Größer als Vorzeichen) ist ein CSS-Kombinator.

Ein Kombinator erklärt die Beziehung zwischen den Selektoren.

Ein CSS-Selektor kann mehr als einen einfachen Selektor enthalten. Zwischen den einfachen Selektoren können wir einen Kombinator einfügen.

In CSS3 gibt es vier verschiedene Kombinatoren:

  1. Nachkommen-Selektor (Leerzeichen)
  2. Kinderauswahl (>)
  3. benachbarter Geschwisterwähler (+)
  4. allgemeiner Geschwisterwähler (~)

Hinweis: < ist in CSS-Selektoren nicht gültig.

Geben Sie hier die Bildbeschreibung ein

Zum Beispiel: 

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

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

Weitere Informationen zu CSS-Kombinatoren

Premraj
quelle
developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj Vielen Dank für die hervorragende Erklärung der Eltern-Kind-CSS-Selektoren!
YCode
Was bedeutet es dann, wenn Sie so etwas bekommen, auf .entry-content > * {"code" }das folgt .entry-content {"other code" }? Deckt nicht .entry-content > *alle Kinder von ab entry-content?
YCode
14

Wie andere erwähnen, ist es ein Kinderselektor. Hier ist der entsprechende Link.

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

Dagg Nabbit
quelle
Vielen Dank für den Link! Dort habe ich auch die "Adjacent Geschwister Selektoren" entdeckt.
Mischa Moroshko
Sie finden Browser - Unterstützung auf Sitepoint. Funktioniert nicht in IE6, wenn es für Ihre Projekte wichtig ist, OK überall sonst. Diese Ressource ist insb. nützlich für Geschwister ,: nth-child () usw., wo die Unterstützung noch unvollständig ist
FelipeAls
10

Es werden pElemente mit Klassen abgeglichen some_class, die sich direkt unter a befinden div.

dan04
quelle
5

Alle pTags mit Klasse, some_classdie direkte untergeordnete divElemente eines Tags sind.

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

Alle direkten Kinder, <p>mit denen sie zusammen sind, .some_classwürden den Stil auf sie anwenden.

suraj rawat
quelle
3

(Child Selector) wurde in CSS2 eingeführt. div p {} wählt alle p-Elemente aus, die von div-Elementen abgeleitet sind, während div> p nur untergeordnete p-Elemente auswählt, nicht Enkelkinder, Urenkelkinder usw.

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

Weitere Informationen zu CSS Ce [Lektoren und deren Verwendung finden Sie in meinem Blog, in CSS- Selektoren und in CSS3-Selektoren

Avinash Malhotra
quelle
0

Der Selektor mit dem größeren Vorzeichen (>) in CSS bedeutet, dass der Selektor rechts ein direkter Nachkomme / Kind von allem ist, was links ist.

Ein Beispiel:

article > p { }

Bedeutet nur, einen Absatz zu formatieren, der nach einem Artikel steht.

authentichigh
quelle