PDA

View Full Version : Double Class Selector Confusion


andy384
03-23-2006, 12:11 AM
I am a little confused on the proper usage of class selectors.

I want to set a class to turn my text blue.

What is the difference between:

.blue {
color: blue;
}
and

div.blue {
color: blue;
}

I searched but couldn't find anything. Do they both do the exact same thing and one is more "proper" or does one way give you more options?

Second question is taking this concept one step further.

I want to use two classes in my selector to change backgrounds for certain links with this html:

<div class="thumbnail"><div class="box"></div>


So I use this CSS:


/* Example 1 */

div.thumbnail {
margin: 2px 0 13px 0;
padding: 0;
clear: left;
border: 0;
}
.thumbnail div.box {
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 0;
width: 100px;
height: 75px;
background: transparent url(box.gif) 0 -75px no-repeat;
}
.thumbnail div.box a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
text-decoration: none;
background: transparent url(box.gif) top left no-repeat;
}

.thumbnail div.box a:hover {
background: transparent url(box.gif) 0 75px no-repeat;
}


Is there any difference between that and this:


/* Example 2 */

.thumbnail {
margin: 2px 0 13px 0;
padding: 0;
clear: left;
border: 0;
}
.thumbnail .box {
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 0;
width: 100px;
height: 75px;
background: transparent url(box.gif) 0 -75px no-repeat;
}
.thumbnail .box a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
text-decoration: none;
background: transparent url(box.gif) top left no-repeat;
}

.thumbnail .box a:hover{
background: transparent url(box.gif) 0 75px no-repeat;
}


Basically, is the div.class neccessary? Or do they both do the exact same thing? If they do the same thing then why wouldn't you always use .class like the second example? If not, why is it neccessary to use the div.class? What does it do differently?

Thanks :D

domedia
03-23-2006, 05:08 PM
.blue = any container with the class blue
div.blue = any div container with the class blue
-They're both 100% right, use the one that you feel you're more comertable with or that suits you better

That would basically answer the rest of your questions?

andy384
03-23-2006, 07:38 PM
Thanks Domedia :D

I got it now!