CODEWITHSUNDEEP
csscss-selectors
sushil bharwani
sushil bharwani

Reputation: 30197

problem on cascading rules in css


<style>
div#b {
background-color:blue;

}
#b {
background-color:red;

}
</style>

<div id='a'> div a
    <div id='b'>
    div b
    </div>
</div>

I have two questions with this style and this html. Why does div b takes blue color. I want to know the cascading rules where i can learn more about it? My Second question is what should i do with css to make div b appear inside div a?

Upvotes: 0

Views: 121

Answers (4)

DwB
DwB

Reputation: 38328

The issue with "my divs appear as lines" is because the width of the inside div is the same as the width of the outside div (default).

Try the following:

<style>
div.inside
{
    background-color: red;
    padding: 5px;
}
div.outside
{
    background-color: green;
    padding: 5px;
}
</style>
<div class="outside">
This is text in the outside div.
<div class="inside">
inside
</div>
</div>

You should see a thin line of green (about 5px wide) on the left, right, and bottom of the inside div. This is not the only way to get this effect.

Upvotes: 0

BoltClock
BoltClock

Reputation: 724452

div#b is more specific than #b because you have an element selector. The first selector specifies what kind of element to look for, whereas the second one says it doesn't matter as long as it picks up that ID.

div#b means

Find only a div whose ID is b.

while #b means

Find any element whose ID is b.

Therefore by specificity, the first rule overrides the second rule.

I don't understand what you mean by making #b appear inside #a, it looks fine to me the way your HTML is structured. On the other hand, you don't have any CSS rules for #a, so there's only background color for #b.

EDIT: if you want the appearance of a box inside another box, give the outer box some padding, and of course a background color:

#a {
    background-color: yellow;
    padding: 1em;
}

Upvotes: 3

Gerrat
Gerrat

Reputation: 29730

For some css rule references see:

http://css-tricks.com/specifics-on-css-specificity/
http://htmlhelp.com/reference/css/structure.html#syntax

Use display: inline to make div b appear inside a:

<style>
div#b {
background-color:blue;
display: inline;
}
#b {
background-color:red;

}
</style>
<body>
<div id='a'> div a
    <div id='b'>
    div b
    </div>
end div a
</div>

Upvotes: 0

steve_c
steve_c

Reputation: 6265

CSS Selectors work on specificity. More specific selectors mean that the rules defined within that selector are going to be used in favor of a less specific selector.

As a rule:

  • element selectors such as div, img, etc carry a weight of 1
  • class selectors such as .myClass carry a weight of 10
  • id selectors such as #myId carry a weight of 100

From this you can pretty easily determine why the above failed.

div#b = 101
#b = 100

101 > 100

Upvotes: 3

Related Questions