What the heck does this mean?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

What the heck does this mean?

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Hmmmm....I think I follow... :P

Thanks for that :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Yeah multiple classes are very, very handy indeed.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

cool...

That is nice :) Now if I could just remember it :P
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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???
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ">".
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Cool...

So I have to close all tags now or no?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
Post Reply