CSS underelement vælger

I modsætning til efterkommervalg kan underlæggende elementvalg (Child selectors) kun vælge elementer, der er underlæggende til et bestemt element.

Vælg underlæggende element

Hvis du ikke ønsker at vælge alle efterkommere, men i stedet ønsker at indsnævre omfanget og kun vælge underlæggende elementer til et bestemt element, skal du bruge et underlæggende elementvalg (Child selector).

For eksempel, hvis du ønsker at vælge kun <strong>strong</strong>-elementer, der er underlæggende til <h1></h1>-elementer, kan du skrive sådan:

h1 > strong {color:red;}

Denne regel vil gøre de to <strong>strong</strong>-elementer under den første <h1></h1> til røde, men den anden <h1></h1>'s <strong>elementer</strong> er ikke påvirket:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Prøv det selv

Syntaksforklaring

Du har sandsynligvis bemærket, at underelementsymbolet bruges med en stor parentes.

Der kan være mellemrum på begge sider af underelementsymbolet, dette er valgfrit. Derfor er følgende skrivemåder alle gyldige:

h1 > strong
h1> strong
h1 >strong
h1>strong

Læst fra højre til venstre kan vælgeren h1 > strong fortolkes som 'vælg alle strong-elementer, der er under som elementer'.

Kombination af efterkommer vælger og underelement vælger

Se nedenstående vælger:

table.company td > p

Denne vælger vælger alle p-elementer, der er under som elementer, som selv arver fra table-elementet, som har en class-attribut, der indeholder company.