CSS Barn Element Väljare

Jämfört med efterkommande elementväljare kan underliggande elementväljare (Child selectors) endast välja element som är underliggande element till ett visst element.

Välj underliggande element

Om du inte vill välja vilka som helst efterkommande element, utan vill begränsa valet till endast underliggande element av ett visst element, använd sedan underliggande elementväljaren (Child selector).

Till exempel, om du vill välja endast <strong>strong</strong>-element som är underliggande element till <h1>-elementet, kan du skriva så här:

h1 > strong {color:red;}

Denna regel kommer att ändra de två <strong>strong</strong>-elementen under den första <h1>-taggen till röd färg, men det andra <h1>-elementets <strong>inte</strong> påverkas:

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

Prova det själv

Grammatikförklaring

Du bör ha lagt märke till att Barnsatsen använder en större än-tecken (Barnsatsen).

Det finns tomma tecken mellan Barnsatsen, detta är valfritt. Därför är följande skrivningar lika korrekta:

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

Om man läser från höger till vänster kan Väljaren h1 > strong tolkas som "Välj alla strong-element som är barn till h1-elementet".

Kombinera Efterkommande Väljare och Barn Väljare

Se nedan denna Väljare:

table.company td > p

Ovanstående Väljare väljer alla p-element som är under td-elementet, detta td-element är själv från table-elementet som har en class-attribut som innehåller company.