div.a div.x {color:Red}
div.b div.x {color:Green}
The two styles above have the same level of specificity so the browser is
taking the style that gets read last in the code. If you changed the order
the result would be Red.
div.x {color:Blue}
This is less specific that the other two so it is overridden. You can make
it more specific by making it an ID instead of a class. But if you change
div.x to div#x it will still be green. The only way to over ride it would be
to add a tag to the text like <span> or <p>
<html>
<head>
<title>CSS Test</title>
<style>
div.a div.x {color:Red}
div.b div.x {color:Green}
div.x span {color:Blue}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="x">
<span>Test</span>
</div>
</div>
</div>
</body>
</html>
This article has an interesting approach to explaining CSS specificity:
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Jamie
On Sat, Jul 18, 2009 at 1:40 PM, jesu4u <[email protected]> wrote:
> Its really tough one guys.
>
> Thanks and regards.
> Jesu
> (meentum santhipom, phir milenge)
>
>
>
>
>
> On Wed, Jul 15, 2009 at 9:19 PM, Passiday <[email protected]> wrote:
>
>>
>> Hallo!
>>
>> Please consider this test code:
>>
>> ******************
>> <html>
>> <head>
>> <title>CSS Test</title>
>> <style>
>> div.a div.x {color:Red}
>> div.b div.x {color:Green}
>> div.x {color:Blue}
>> </style>
>> </head>
>> <body>
>> <div class="a">
>> <div class="b">
>> <div class="x">
>> Test
>> </div>
>> </div>
>> </div>
>> </body>
>> </html>
>> ******************
>>
>> In both MSIE8 and Firefox 3.0.11 this renders as green, while I'd
>> expect blue. What is the reason for this rule precedence? Can I make
>> the div.x rule stronger than the other?
>>
>> Thanks!
>>
>> Passiday
>>
>>
>>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
