: primo figlio che non lavora come previsto

96

Sto cercando di selezionare il primo h1all'interno di una divcon una classe chiamata detail_container. Funziona se h1è il primo elemento all'interno di questo div, ma se viene dopo questo ulnon funzionerà.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Avevo l'impressione che il CSS che ho selezionerà il primo h1indipendentemente da dove si trovi div. Come posso farlo funzionare?

css css-selectors

— L'uomo dei muffin
fonte

1

Qualunque cosa CSS non possa fare, JavaScript può farlo.

— JCOC611

11

Questo è qualcosa che puoi fare con CSS3 però :)

— BoltClock

216

Il h1:first-childselettore significa

Seleziona il primo figlio del suo genitore
se e solo se è un h1elemento.

Il :first-childcontenitore qui è il ul, e come tale non può soddisfare h1:first-child.

Ci sono CSS3 :first-of-typeper il tuo caso:

.detail_container h1:first-of-type
{
    color: blue;
}

Ma con i problemi di compatibilità del browser e quant'altro, è meglio dare prima h1una lezione, quindi prendere di mira quella classe:

.detail_container h1.first
{
    color: blue;
}

— BoltClock
fonte

2

Ora capisco, anche se penso che avrebbero dovuto implementare entrambe le versioni quando hanno creato lo standard.

— The Muffin Man

Non funziona nella versione IE9. Dice h1: sconosciuto nello strumento di sviluppo

— Cine

11

Elenco di compatibilità del :first-of-typeselettore.

— Jess Telford

4

Elenco di compatibilità più recente di :first-of-type. Il vecchio collegamento non è corretto.

— BadHorsie

A mio avviso, il termine :first-childnon è chiaro da capire, perché definisci l'elemento come selettore CSS, diciamo h1, e poi successivamente pensi "prendi il primo figlio" di tutti nel livello DOM scelto. L'ho usato male tante volte ... Dobbiamo :first-of-typeabituarci al selettore e pensare al primo figlio del suo tipo.

— Kai Noack

13

:first-childseleziona il primo h1 se e solo se è il primo figlio del suo elemento genitore. Nel tuo esempio, ulè il primo figlio didiv .

Il nome della pseudo-classe è in qualche modo fuorviante, ma è spiegato abbastanza chiaramente qui nelle specifiche.

Il :firstselettore di jQuery ti dà quello che stai cercando. Puoi farlo:

$('.detail_container h1:first').css("color", "blue");

— Rob Sobers
fonte

Hai ragione, è fuorviante, principalmente mi sono confuso perché ho usato jQuery per farlo prima.

— The Muffin Man

9

Per quel caso particolare puoi usare:

.detail_container > ul + h1{ 
    color: blue; 
}

Ma se hai bisogno dello stesso selettore in molti casi, dovresti avere una classe per quelli, come ha detto BoltClock.

— Grekz
fonte

Non dovresti avere problemi. Qui il ref w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

puoi anche usare

.detail_container h1:nth-of-type(1)

Modificando il numero 1 con qualsiasi altro numero è possibile selezionare qualsiasi altro elemento h1.

— Fabrice
fonte

1

Potresti racchiudere i tuoi h1tag in un altro dive quindi il primo sarebbe il first-child. Che divnon ha nemmeno bisogno di stili. È solo un modo per separare quei bambini.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— GhostToast
fonte

0

L'elemento non può ereditare direttamente dal <body>tag. Puoi provare a metterlo in un <dir style="padding-left:0px;"></dir>tag.

— Edmond Chow
fonte