Welche Selector wird hier angesprochen?

[tooom]

Ich habe mir gerade aus Spaß eine Seite in Quell-HTML angeschaut und zusätzlich dazu das CSS.

Ich habe gesehen, dass folgendes div definiert ist:

<div class="col cs1">

Ein Blick in die CSS-Datei sagt mir:

.listCont .cs1	{ width:240px; }
.listCont .prodRow .cs1 .product				{ ... }
.listCont .prodRow .cs1 .product .avail	{ ... }
.listCont .prodRow .cs1 .product .prod 	{ ... }
.listCont .prodRow .cs1 .product .prod strong { ... }

.listCart .cs1 { width:120px; }
.paymentCart .cs1 { width:506px; }


.listCont .headRow .col			{... }
.listCont .headRow .col div	{ padding-left:10px; }
.listCont .prodRow .col			{ ... }

Ich gehe mal davon aus, dass der Selektor "col" sich auf die Verschachtelung ".listCont .headRow .col div" bezieht, auf welchen Selektor sich jetzt aber "cs1" bezieht sehe ich nicht? Welcher Selektor ist gemeint, und warum?

 

[zatec]

Verstehe die Frage nicht ganz. Das oben genannte Div hat die beiden Klassen "col" und "cs1". Diese werden beide im CSS-Code angesprochen. Man kann im CSS auch ein Element ansprechen, dass BEIDE Klassen haben MUSS. Das wäre dann der Selektor .col.cs1 (ohne Leerzeichen) und zu Deutsch: das Element mit der Klasse .col UND .cs1

 

[tooom]

Die Klasse "col" ist klar, aber nicht die Klasse "cs1", für "cs1" sehe ich folgende Möglichkeiten:
1. .listCart .cs1 { width:120px; }
2. .listCont .cs1 { width:240px; }
3. .listCart .cs1 { width:120px; }

Ich habe gesehen, dass das div in folgender Verschachtelung steht:

<div class="listCont">
<div class="col cs1">
</div>
</div>

Daher gehe ich davon aus, dass ".listCont .cs1 { width:240px; }" gewählt wird. Wie nennt sich dieses Konzept der Verschachtlung, so dass der Browser weiß, dass er ".listCont .cs1 { ...}" wählen muss, wenn der "<div class="listCont"> <div class="col cs1"> </div></div>" im html findet?

 

[struppi]

Die Klasse "col" ist klar, aber nicht die Klasse "cs1", für "cs1" sehe ich folgende Möglichkeiten:
1. .listCart .cs1 { width:120px; }
2. .listCont .cs1 { width:240px; }
3. .listCart .cs1 { width:120px; }

Das sind Nachfahrenselektoren, d.h. sie treffen auf Elemente mit der Klasse cs2 zu, die innerhalb eines Elements sind, dass die jeweilige davor stehende Klasse hat.
CSS-Selektoren :: Kontext-Selektoren: Kind-Selektor, Nachfahrn-Selektor, Nachbar-Selektor