ansaurus

Question

CSS Newbie Question

Answer 1

+3 A:

You want:

#content div {

i.e. "All the div elements that descend from the element with the id 'content'"

I recommend giving http://css.maxdesign.com.au/selectutorial/ a read.

David Dorward 2010-08-15 19:10:54

Too generic IMO. What if each element has sub-divs?

Pekka 2010-08-15 19:14:35

Then the tutorial I recommended will explain child selectors, and everything else needed to make a more refined selector.

David Dorward 2010-08-15 19:51:44

Answer 2

A:

There are actually three alternative solutions to your problem

First solution

The first one is very close to what you've written yourself except that it should define CSS for any DIV underneath the one with the id="content":

#content div { height: 25px; width: 25px; float: left; margin: 10px }

Second solution

I should point out that this one is probably more common and gives more flexibility especially if you want subDIVs to not have common classes (in your case sizing). This one changes your markup a bit because you can define multiple CSS classes on a single HTML element:

<div>
    <div class="content one"></div>
    <div class="content two"></div>
    <div class="content three"></div>
    <div class="content four"></div>
    <div class="content five"></div>
</div>

This way your CSS classes change a bit. You have to replace # with a . (dot):

.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }

Third solution

This one is very similar to the second one, except that it keeps the IDs of sub DIVs:

<div>
    <div id="one" class="content"></div>
    <div id="two" class="content"></div>
    <div id="three" class="content"></div>
    <div id="four" class="content"></div>
    <div id="five" class="content"></div>
</div>

And CSS:

.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }

Robert Koritnik 2010-08-15 19:11:05

Note that IE6 has problems with multiple classes.

Pekka 2010-08-15 19:17:37

@Pekka: Not in this case. IE6 has problems in multi class CSS definitions (ie. `div.content.one {...}` <- this would be a problem). but defining multiple classes on an HTML element is not a problem.

Robert Koritnik 2010-08-15 19:20:27

@Robert you're right. http://www.quirksmode.org/css/multipleclasses.html

Pekka 2010-08-15 19:24:11

Answer 3

+3 A:

You have to specify the node after #content:

#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }

or you can do this:

#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }

You can also give each of those divs a class name and do

.divs { SAME RULES }
#one { INDIVIDUAL }

meder 2010-08-15 19:11:45

really good answer

Dusty Roberts 2010-08-15 20:09:37

Answer 4

+1 A:

You could use classes. Define a base class that contains the common properties:

/* Generic class for all four elements */
div.button {  height: 25px; width: 25px; float: left; margin: 10px; }

and then define 1-4 (I'm using classes here as well, as it is the best practice in many cases, but you can carry on using IDs if you want to):

div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }

and then assign the base class and the specific class:

 <div id="one" class="button one"></div>

the "button one" part will let both classes' properties apply to the element.

Pekka 2010-08-15 19:12:56

Your comment about the sub divs were interesting, however, I approved his request because it was the first one I checked. Just out of curiosity, do you use classes for all your CSS markup? I ask because I'm wondering if it's "better" using classes or #ids.

coson 2010-08-15 19:55:42

@coson id's must be unique on a page. Collisions lead to script problems, which is why I like to use id's only for elements that are totally unique (e.g. the logo of a page) or those that I'm later going to query in JavaScript using `getElementById` or jQuery's `$("#id")`. If in doubt, use classes. They are great, flexible, can be freely combined and can override each other.

Pekka 2010-08-15 19:57:17

Answer 5

A:

Here ya go, #content div is what you want. You can go deeper if you needed, ie #content div span a would reference an anchor, nested in a span that's nested in the div that's nested in something with the ID of #content.

http://jsfiddle.net/eDhXs/

#content { display: block; width: 250px; height: 50px; background-color: #330000; }

#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }

Robert 2010-08-15 19:13:55

Answer 6

A:

This is where you would make use of classes. IDs are great for when you have a particular element that is unique to the page. But classes, you can define a set of attributes (even set an attribute more important than another). Furthormore, an element can have more than one class where they can't IDs

So what I would do is this

#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }

.box {
  height: 25px;
  width: 25px;
  float: left;
  margin: 10px;
}

And specify them in your HTML like this

<div id='pink' class='box'></div>

I like this version the best, because if you ever need to select this element in the DOM explicitly, it would look like

#pink.box {
   height: a different height;
}

Zane Edward Dockery 2010-08-15 19:16:11

Answer 7

A:

You have two options, the first is to use the parent container (in this case the div #content) to set default attributes to each of it's nested divs, to do this you could use code like this:

#content div {
repeat-attributes-here;
}

This will set attributes for every div inside #content.

The second option is to use classes to define the common attributes. The benefit of this is you can still have other divs with different styling options (in case you add something new where you don't want the repeated functionality.

To do this you would do this:

#one {
unique-functionality-here
}

.layout-block {
repeat functionality here
}

Then define the div in the CSS like this:

<div id="one" class="layout-block"></div>

Hope that helps!

Walker 2010-08-15 19:29:17

ansaurus

tags:

views:

answers:

CSS Newbie Question

First solution

Second solution

Third solution

related questions