CSS Forum

**EViS** · 06:12 PM

What is the difference between writing the following in a stylesheet?:

Code:

div.container
div#container

vs

Code:

.container
#container

Why write "div" in front of either? Is there something I am missing?

**chrishirst** · 03-02-2011, 06:19 PM

The first set are rules that are tag specific and will ONLY apply to <div>ision elements. The second set could be applied to any element.

**EViS** · 06:36 PM

Right, so you are saying that whereas div#container rule could not be applied to a <td id="container"> element, a #container rule could be applied to a <td id="container"> element?

What are the reasons for specifying div/class/p, etc. prior to a class (.container) /div (#container) element?

**chrishirst** · 03-02-2011, 06:35 PM

Quote:

Originally Posted by EViS

I'm not quite following what you mean. Surely a div#container rule will only apply to a <div> element?

Is that not that what I said?

Quote:

Originally Posted by chrishirst

The first set are rules that are tag specific and will ONLY apply to <div>ision elements.

or is using the full name of a <div> causing the confusion?

**EViS** · 03-02-2011, 06:38 PM

Sorry bud, I'm dosing off here and yes that is what you said. I edited my reply straight after. Any chance you could answer the edited reply instead please

?

**chrishirst** · 03-02-2011, 07:18 PM

Quote:

Originally Posted by EViS

Right, so you are saying that whereas div#container rule could not be applied to a <td id="container"> element, a #container rule could be applied to a <td id="container"> element

That's correct.

Quote:

Originally Posted by EViS

What are the reasons for specifying div/class/p, etc. prior to a class (.container) /div (#container) element?

simply; specificity
Rules applied using the element ID (#rulename) are specific to one element and can be used to isolate rules to specific child elements in the document ie:

Code:

.warn {
/* this is a global rule set */
    color:#ff0000;
    text-decoration: blink;
}

so any element that has the <body> element as a parent with class="warn" will have flashing red text, however you can override this with;

Code:

#different .warn {
    color: #00ff00;
    text-decoration: underline; 
}

so:

HTML Code:

<body>
<span class="warn">This is red and blinking</span>

<div id="different">
<span class="warn">But this is green and underlined</span>
</div>
</body>

**EViS** · 05:29 AM

Thanks for the response. I understand all of that, however your example does not specifically refer to div#container vs #container (i.e. In what instance would you write "div" infront of "#"?)

I can come up with examples for p#container (see below). However I still cannot see a reason for ever needing to write div#container?

Flashing red text anywhere inside <body>:

Code:

body {
    color:#ff0000;
    text-decoration: blink;
}

Underlined green text anywhere inside <div id="container">:

Code:

#container {
    color: #00ff00;
    text-decoration: underline; 
}

Normal blue text anywhere inside <div id="container">:

Code:

p#container {
    color: #0000ff;
    text-decoration: 0; 
}

HTML:

Code:

<body>
<p>This is red flashing text</p>
<div id ="container">
This is green underlined text
<p id="container">This is blue text</p>
</div>
</body>

**EViS** · 05:43 AM

Right, having just watched a Lynda.com video on this, I've realised that I'm seriously over-complicating everything and I do fully understand it

.

Thanks for you help pal.