Styling a Div Class within Div ID

Question

I have a page that has the following div element:

<div id="name" class="class_name">

Which of the following should I use to style the class?

#name .class_name
name .class_name
#name class_name

Answer 1

Just #name would be enough to apply the style only to that specific element:

#name {
   // your styles here
}

If you want to apply the style to all the elements using the class_name class, then you can use:

.class_name {
   // your styles here
}

Answer 2

If I got your question right you use

#name .class_name

as in

#name .class_name {
    color:#000;
}

But actually you don't need to do that. If #name and .class_name are oly used in that div you can just drop the .class_name. Otherwise, if you use multiple stuff with .class_name that don't share the same properties as div #name, you should separate them.

.class_name {
    color:#000;
}
#name {
    width:600px;
}

Answer 3

ID's should be unique, so there isn't much point in styling both the id of the div and the class_name.

Just using the ID of the div is fine if that's your goal.

#name
{
   //styles
}

If you want to style every div that has that class name, then just use

.class_name
{
   //styles
}

Answer 4

You can read about CSS selectors here:

http://reference.sitepoint.com/css/selectorref

In the CSS you can reference it by class:

.class_name { color: green; }

or by id using #id

#name { color: green; }

or by element type

div { color: green; }

//or by combinations of the above

div.class_name { color: green; }
div#name { color: green; }

Answer 5

If you already have #name and .class_name styled, but for some reason you want to style

<div id="name" class="class_name"></div>

(that is, a specific style to the element with an id of "name" AND a class of "class_name"), you can use

#name.class_name {
/* note the absence of space between the id and class selector */
    ...
}

Bear in mind that this selector is not supported by Internet Explorer 6.

Answer 6

#name .class_name will apply to the children elements of your div with the .class_name class.

There must not be any spaces between.

You should use: #name.class_name because it is the correct syntax.

But, when working with identifiers, it should be enough to use it alone.

#name {
  // some properties
}

But let's say you have a unique block, which inherits some generic styles, then you could use #idenifier.class to mix styles.

#comments {
    width: 453px;
}

#comments.links
{
   border: 0 none;
}