CSS Pop-Quiz - Page 2

**Kickersny.com** · October 2nd, 2005, 5:01 PM

Oh, I Googled it and I know exactly what you're talking about now. I've known it, I've never heard the term "specificity" before though.

**ceo** · October 2nd, 2005, 5:03 PM

The way it was explained to me is that it's the little drill sergeant that goes around and tells all the parts of CSS who gets to go first.

(Seriously.)

But basically it's how CSS defines what rules to follow and what comes first, mostly with regards to when things have multiple rules - it denotes which ones are, uhm, more important. So, like style comes before id comes before class.

This is one of those "I can't explain it without using the word to explain it" things - so, I think that's why it's so hard to understand.

**Kickersny.com** · October 2nd, 2005, 5:10 PM

To add to that: it also denotes which attributes are assigned to which element. Which ever is more explicitly defined gets precedence. Like,

Code:

div a:link{
    color: #000000;
}
a:link{
    color: #FFFFFF;
}

Specificity is why the links within a <div> would be black and not white.

H · October 2nd, 2005, 5:14 PM

Awesome CEO, but you didn't mention the selector point-value recipe...

For each selector you get a point value. Each point value starts out as 0.0.0.0 and grows as you process what is in each selector.

For every element in the select, you add 1 to the last column;

Code:

p,div {
color: #FB1;
}

The value would be 0.0.0.2

For every class you have, you add 1 to the value of the third column;

Code:

div.cat {
color: #BCA;
}

The value would be 0.0.1.1

For every ID element, you add 1 to the second column;

Code:

div#header li.nav {
color: #232;
}

The value would be 0.1.1.2

And finally, if you use the style attribute in a tag, it adds 1 to the first column;

Code:

<div style="color: #424;">blah</div>

The value would be 1.0.0.0

How it works is that CSS will go through and determine by specificity which rule will be applied to a property of an element. It's essentially the higher the number, the more power it has. Do note that if something has a value in an earlier column that it will automatically override something without a value in it. Values cannot be transfered from one column to another, meaning that 10 elements in the selector will not transfer over as 1 class. 1 class would override something with 10,000 elements (in theory).

**ceo** · October 2nd, 2005, 5:18 PM

Quote:

Originally Posted by Haugland

Awesome CEO, but you didn't mention the selector point-value recipe...

Yeah, but if I did, then you wouldn't have gotten to explain it and how sad would you have been to loose out on that?

**Ancyru** · October 3rd, 2005, 1:47 AM

Oh! I knew that, well parts of it anyway.

[=

October 2nd, 2005, 5:01 PM	#10 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	Oh, I Googled it and I know exactly what you're talking about now. I've known it, I've never heard the term "specificity" before though. __________________ - Evan Charlton \| [site] \| Server - SH58

October 2nd, 2005, 5:10 PM	#12 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	To add to that: it also denotes which attributes are assigned to which element. Which ever is more explicitly defined gets precedence. Like, Code: div a:link{ color: #000000; } a:link{ color: #FFFFFF; } Specificity is why the links within a <div> would be black and not white. __________________ - Evan Charlton \| [site] \| Server - SH58

October 2nd, 2005, 5:14 PM	#13 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,084 posts Gave thanks: 48 Thanked 131 times	Awesome CEO, but you didn't mention the selector point-value recipe... For each selector you get a point value. Each point value starts out as 0.0.0.0 and grows as you process what is in each selector. For every element in the select, you add 1 to the last column; Code: p,div { color: #FB1; } The value would be 0.0.0.2 For every class you have, you add 1 to the value of the third column; Code: div.cat { color: #BCA; } The value would be 0.0.1.1 For every ID element, you add 1 to the second column; Code: div#header li.nav { color: #232; } The value would be 0.1.1.2 And finally, if you use the style attribute in a tag, it adds 1 to the first column; Code: <div style="color: #424;">blah</div> The value would be 1.0.0.0 How it works is that CSS will go through and determine by specificity which rule will be applied to a property of an element. It's essentially the higher the number, the more power it has. Do note that if something has a value in an earlier column that it will automatically override something without a value in it. Values cannot be transfered from one column to another, meaning that 10 elements in the selector will not transfer over as 1 class. 1 class would override something with 10,000 elements (in theory).

October 3rd, 2005, 1:47 AM	#15 (permalink)
Ancyru L'Awesome Advocate Super #1 Joined in May 2004 Lives in .au Hosted on Mango 2,423 posts Gave thanks: 1 Thanked 5 times	Oh! I knew that, well parts of it anyway. [= __________________ When I get sad, I stop being sad, and be AWESOME instead. True story.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

October 2nd, 2005, 5:03 PM	#11 (permalink)
ceo Senior Member Super #1 Joined in Jan 2005 1,546 posts Gave thanks: 70 Thanked 33 times	The way it was explained to me is that it's the little drill sergeant that goes around and tells all the parts of CSS who gets to go first. (Seriously.) But basically it's how CSS defines what rules to follow and what comes first, mostly with regards to when things have multiple rules - it denotes which ones are, uhm, more important. So, like style comes before id comes before class. This is one of those "I can't explain it without using the word to explain it" things - so, I think that's why it's so hard to understand.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)