Beginnersfout in die Afstammelingselektor

Kyk na die volgende selekteerder:

p.eee {
	color: red;
}

Jy moet reeds weet dat so 'n selekteerder paragrawe met die klas eee sal kies. Byvoorbeeld, hierdie:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Kyk nou na hierdie selekteerder:

p .eee {
	color: green;
}

Hierdie selekteerder verskil van die vorige deurdat daar 'n spasie tussen die tagnaam en die klasnaam is. Hierdie spasie verteenwoordig 'n afstammelingselekteerder. Dit beteken in hierdie geval kies ons alle elemente met die klas eee, wat binne paragrawe geleë is. Byvoorbeeld, hierdie selekteerder sal die volgende spanne kies:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Resultaat van die kode-uitvoering:

Dus, weer eens: p.eee - so 'n selekteerder kies paragrawe met die klas eee. Maar as ek dit so maak: p .eee, dan kies ek alle elemente met die klas eee, geleë binne paragrawe. Voel hierdie verskil.

Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:

p.bbb {
	color: red;
}

Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:

p .bbb {
	color: red;
}

Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:

.eee p.bbb {
	color: red;
}

Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:

.eee p .bbb {
	color: red;
}