Απορία σε css

[jonhh]

Καλησπέρα,

 

είμαι newbie στο css, οπότε δείξτε επιείκια.

 

Εχω ένα αρχείο style.css και κοιτώντας το φτάνω στο εξης

>
.three-cols {
overflow: hidden;
}

.three-cols .col1, .three-cols .col2, .three-cols .col3 {
float: left;
width: 300px;
height: auto !important;
height: 360px;
min-height: 360px;
background: url(images/bg_04.jpg) no-repeat;
}

.three-cols .col1 {
background-position: 0px 0px;
}

.three-cols .col2 {
background-position: -300px 0px;
}

.three-cols .col3 {
background-position: -600px 0px;
}

.three-cols .col1 .title, .three-cols .col2 .title, .three-cols .col3 .title {
height: 50px;
margin: 0px;
padding: 10px 0px 0px 25px;
text-transform: lowercase;
letter-spacing: -2px;
font: normal 33px "Times New Roman", Times, serif;
color: #FFFFFF;
text-shadow: #291003 0px 1px 2px;
}

.three-cols .col1 .entry, .three-cols .col2 .entry, .three-cols .col3 .entry {
padding: 25px;
}

 

..three-cols καταλαβαίνω τι είναι...

 

.three-cols .col1 αυτό τί έιναι? Ότι το col1 βρίσκεται μέσα στο three-cols?

 

Ευχαριστώ πολύ!

[thanocaster]

Ναι, ότι το element με κλάση "col1" (το ότι είναι κλάση δηλώνεται με την τελεία πριν το col1) έχει αυτά τα properties ο γονιός του έχει κλάση "three-cols".

[jonhh]

Ναι, ότι το element με κλάση "col1" (το ότι είναι κλάση δηλώνεται με την τελεία πριν το col1) έχει αυτά τα properties ο γονιός του έχει κλάση "three-cols".

 

Οπότε αν θέλω να αναφερθώ στο παιδί col1, πως θα το κάνω?

three-cols col1, ή σκετα col1 ?

 

Σευχαριστώ πολύ για την απάντηση!

[macabre_sunsets]

Εάν αναφερθείς σε αυτό ως ".col1", τότε οποιοδήποτε element έχει class το "col1" θα πάρει τα attributes που έχεις ορίσει.

 

Εάν αναφερθείς σε αυτό ως ".three-cols .col1", τότε μόνο τα elements με class "col1" τα οποία βρίσκοντε μέσα σε κάποιο element με όνομα "three-cols" θα πάρουν τα attributes.

 

Τα παραπάνω εάν θυμάμαι καλά.

[thanocaster]

Έτσι ακριβώς.

 

πχ.

>
<div id="content">

<div class="column">
	<div class="widget">
		<p>This is a widget in a column</p>
	</div>
</div>

<div class="board">
	<div class="widget">
		This is a widget outside the column
	</div>
</div>

</div>

 

Αν στο παραπάνω παράδειγμα δώσεις το παρακάτω css:

>
#content .column .widget {
background: red;
}

 

τότε μόνο το πρώτο div με κλάση "widget" θα έχει κόκκινο background.

 

Ενώ αν δώσεις αυτό το css:

 

>
.widget {
background: red;
}

 

και τα δυο div με κλάση "widget" θα έχουν κόκκινο background.