Page 1 of 1

What the heck does this mean?

Posted: Sat Aug 12, 2006 5:03 pm
by alex.barylski
div#user_menu ul

as opposed to just:

#user_menu ul

Why is it useful? I've applied the DIV and removed it and it doesn't seem to make a difference...

p.s-Thanks to all, especially Oren, I've learned a heck of a lot about CSS in the last couple days :P

Posted: Sat Aug 12, 2006 5:06 pm
by Luke
makes it only apply to uls inside of a div w/id #user_menu as opposed to uls inside of any element w/id #user_menu

Posted: Sat Aug 12, 2006 5:12 pm
by alex.barylski
Hmmmm....I think I follow... :P

Thanks for that :)

Posted: Sat Aug 12, 2006 5:17 pm
by Luke

Code: Select all

<div id="user_menu">
 <ul>
  <!-- This UL would be effected by the div#user_menu ul
 </ul>
</div>

Code: Select all

<span id="user_menu">
 <ul>
  <!-- This UL would not be effected by div#user_menu ul, but it would be effected by #user_menu ul or span#user_menu ul
 </ul>
</span>

Posted: Sat Aug 12, 2006 5:17 pm
by Chris Corbyn
If nothing else, it makes the CSS more structured and easier to relate to what it does in your document. As a drawback, it restricts where you can use the styling.

More useful on classes really since classes can apply to multiple elements whereas ID's can apply to only one element.

For example, you may want a "bigred" class to appear slightly differently when applied to hyperlinks compared with span tags.

Code: Select all

span.bigred {
    font-size: 2em;
    color: #aa1111;
    font-weight: bold;
}

a.bigred {
    font-size: 2em;
    color: #aa1111;
    text-decoration: underline;
}
Maybe even, you want one specific element implementing your class to look slightly different:

Code: Select all

div#your_element.bigred {
    font-size: 2.5em;
    color: #aa1111;
}
Just one more thing I swear... there are other ways of applying subtle changes to different elements... apply multiple classes.

Code: Select all

.bigred {
    font-size: 2em;
    color: #aa1111;
}

.bold_under {
    text-decoration: underline;
    font-weight: bold;
}


.......

<div class="bigred bold_under"> .... </div>

<span class="bigred"> .... </span>

Posted: Sat Aug 12, 2006 5:19 pm
by Luke
d11wtq wrote: Just one more thing I swear... there are other ways of applying subtle changes to different elements... apply multiple classes.

Code: Select all

.bigred {
    font-size: 2em;
    color: #aa1111;
}

.bold_under {
    text-decoration: underline;
    font-weight: bold;
}


.......

<div class="bigred bold_under"> .... </div>

<span class="bigred"> .... </span>
I was completely unaware of that... thanks d11

Posted: Sat Aug 12, 2006 5:24 pm
by Benjamin
Yeah multiple classes are very, very handy indeed.

Posted: Sat Aug 12, 2006 6:08 pm
by alex.barylski
cool...

That is nice :) Now if I could just remember it :P

Posted: Sun Aug 13, 2006 12:20 pm
by Oren
When you do something like .class_name {/*styles here*/}, this style will be applied to any element with class="class_name".
But when you do it like div.class_name {/*styles here*/}, this will be applied only to div's with class="class_name".
Now here is the deal... Each id is unique: Two elements cannot share the same id - this would be illegal. Therefore, #the_id {/*styles here*/} and div#the_id {/*styles here*/}, both point to the same particular element - #the_id {/*styles here*/} actually means "an element with the id: the_id" and not a div with the id: the_id, but again, it is impossible to have another element with this id and that's why there is no difference between the two.

So why it is better to use #the_id {/*styles here*/} over div#the_id {/*styles here*/}?
The answer is simple: reducing file size :wink:

Posted: Sun Aug 13, 2006 1:42 pm
by matthijs
The others explained it well so nothing to add there. One general nitpicky remark somewhat related to the examples here: whenever possible try to use semantic class and id names. class=bigred doesn't mean so much. class="errormessage" does. Whether or not the designer styles them both big and red is another question. But using somewhat meaningfull class names keeps your code clean and .. uuh semantic. Also, when the time comes to redesign the site and you change the design of the classes, "errormessage" is still a valid class name, whereas "bigred" is not when you changed the style to green underlined.

Posted: Sun Aug 13, 2006 3:20 pm
by alex.barylski
Bump :lol:
Line 8 column 65: character data is not allowed here.
..."css/default.css" type="text/css" rel="stylesheet" />
I'm getting error when validating my code...WTF does it mean?

HTML 4.01 STRICT???

Posted: Sun Aug 13, 2006 3:35 pm
by Chris Corbyn
Hockey wrote:Bump :lol:
Line 8 column 65: character data is not allowed here.
..."css/default.css" type="text/css" rel="stylesheet" />
I'm getting error when validating my code...WTF does it mean?

HTML 4.01 STRICT???
<tag /> is not valid HTML. That's XHTML. Take out the "/>" and replace it with ">".

Posted: Sun Aug 13, 2006 4:09 pm
by alex.barylski
Cool...

So I have to close all tags now or no?

Posted: Sun Aug 13, 2006 4:10 pm
by Chris Corbyn
Hockey wrote:Cool...

So I have to close all tags now or no?
Yes and no. Some tags such as <br> don't close. Some tags such as <form> do. XHTML is waaaayyyy more structured.

Posted: Sun Aug 13, 2006 4:12 pm
by matthijs
In HTML yo don't self-close the tags. So you use <br>, <img >, <meta > etc
In XHTML you have to self-close them. So <br />, <img />, <meta /> etc

For other tags it's the same in html and xhtml: <p></p>, <h2></h2>, etc