could one tag have more than one class ?

**RyanReese** · Oct 10, 2008 03:06

Originally Posted by AutisticCuckoo

It may be necessary in order to increase the selector's specificity, to make the declaration override another declaration in another rule that affects the same element(s). For instance, if you had another rule like this,

Code CSS:

.section ul {list-style-type:square}

If your ul with class="nobullet" resides in an element with class="section", your declaration (2) will have no effect, whereas declaration (1) will, provided that the rule appears later in the style sheet.

Er. For the CSS don't you mean "ul.section"? Because <ul class="section" wouldn't be correct for what you had (or maybe I'm just tired).

**AutisticCuckoo** · Oct 10, 2008 03:26

Originally Posted by BoltZ

Er. For the CSS don't you mean "ul.section"?

No.

Let's say you have these CSS rules,

Code CSS:

.section ul {list-style-type:square}
.nobullet {list-style-type:none}

Then you have this markup,

Code HTML4Strict:

<div class="section">
  <ul class="nobullet">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</div>

Your list items will have square markers, even though the list has class="nobullet". The reason is that the first rule has higher specificity (0,0,1,1) than the second (0,0,1,0).

In this case you could change the selector in the second rule to ul.nobullet to increase its specificity to 0,0,1,1. Since the second rule comes after the first rule, it will be applied.

My point was that one reason for including an explicit type selector in this type of rules is to increase the selector's specificity.

**rochow** · Oct 10, 2008 03:34

If they were bad enough to put .ul_nobullet, they'd probably have .ol_numbers

I include the element type if I'm using it on a particular tag... much easier when scanning the stylesheet quickly. I also have everything upfront, so I know whether I need to re-use that class or not however, which is a different scenario to not knowing what'll be on other pages.

**RyanReese** · Oct 10, 2008 05:09

Sleep deprovation. I thought that the HTML was set up like <ul class="section">.

**Aarem** · Oct 12, 2008 06:05

Just on another note, I often use more than one class on the body tag when I am styling menu lists. The list can be the same html on each page but styled differently on each page by using those classes. Very handy.

**RyanReese** · Oct 12, 2008 10:58

Hello A(a)rem, nice to see you came over here. Love my post count?

Anyway shouldn't just one class on <body> be sufficient? Why would you need 2 or more classes for a page?

**AutisticCuckoo** · Oct 12, 2008 12:38

They can be used independently for different things. For instance, one class can be used to describe the subsection of the site where the page is (for highlighting the current nav menu item) while another can indicate whether the page has a column of related information.

Code HTML4Strict:

<body class="news related">

Code CSS:

.home #home,
.news #news,
.about #about
{
  /* style for current nav menu item */
}
 
#wrapper {margin:0 0 0 12em}
.related #wrapper {margin-right:14em}

Doing this with a single class will require several different classes (six for the simple three-section site in my contrived example) and will lead to severely and unnecessarily bloated CSS.

**Aarem** · Oct 12, 2008 16:35

Originally Posted by AutisticCuckoo

They can be used independently for different things. For instance, one class can be used to describe the subsection of the site where the page is (for highlighting the current nav menu item) while another can indicate whether the page has a column of related information.

Yes, that's what I use it for. Nicely put. It's so beautifully efficient, I love this method.

**Aarem** · Oct 12, 2008 16:39

Originally Posted by BoltZ

Love my post count?

Yes, yours is much bigger than mine.

Happy?
I'm figuring to spend more time here, where there are more experts, thus more to learn. And besides, I live round the corner from SP and know some of its people, so it makes sense to use it.

**RyanReese** · Oct 12, 2008 16:40

In all the coding sites I've done I have never done classes on body tag. I used to find it redundant..

**Aarem** · Oct 12, 2008 17:07

It just allows for come very efficient coding. Look at the Happy Cog site, for example. Click on News, for example, and on the news page the News tab is white. Yet the menu code remains the same. Doing this means you can use php includes on menus, yet have a menu styled differently on each page.

**RyanReese** · Oct 12, 2008 17:43

Yes lol. I love this more because I can act myself, not a 60 year old man. Hell there are like 4 Kravvitz's here.

**rochow** · Oct 12, 2008 18:55

Originally Posted by Aarem

It just allows for come very efficient coding. Look at the Happy Cog site, for example. Click on News, for example, and on the news page the News tab is white. Yet the menu code remains the same. Doing this means you can use php includes on menus, yet have a menu styled differently on each page.

I use simple PHP to add a class to the current page item.

**Aarem** · Oct 12, 2008 18:59

Originally Posted by rochow

I use simple PHP to add a class to the current page item.

Yes, that's another option. How do you set it up? I haven't done it before.

**rochow** · Oct 12, 2008 19:15

Originally Posted by Aarem

Yes, that's another option. How do you set it up? I haven't done it before.

Two options.

Function

PHP Code:


<?php
    function currentPage($page) {
        $file = basename($_SERVER['SCRIPT_NAME']);
        $file = substr($file, 0, -4);
        if($file==$page) echo ' class="current"';
    }
?>

Basically, gets the page name, strips the .php, then if the page called is the current page it echos class="current".

<li<?php currentpage('index'); ?>><a href="index.php">home</a></li>

Name

At the top of every page give it a name. Such as $page="about". Then call it in the menu:

<li<?php if($page=="about") echo ' class="current"'; ?><a href="#">About</a></li>

Works nice for simple sites. I always use PHP includes for easy maintainability. Not the best solution for anything that's big as it's all done manually, in that case a CMS is better.

**Aarem** · Oct 12, 2008 19:49

Great answer! Thanks so much rochow. I'm still learning PHP, but will digest this bit by bit. The name option looks closest to the CSs option, but on first inspection, looks even simpler. Well done!

**runrunforest** · Oct 12, 2008 20:17

whats the differenence between these two ?

ul.nobullet {...}

.nobullet ul {...}

Im confused

**oddz** · Oct 12, 2008 20:24

first selects all unordered lists with a class name equal to nobullet. The second selects all unordered lists that are a descendant of any element with a class name nobullet.

<ul class="nobullet">
</ul>

<div class="nobullet">
<ul
</ul>
</div>

**RyanReese** · Oct 13, 2008 07:53

whats the differenence between these two ?

ul.nobullet {...}

.nobullet ul {...}

Im confused

ul.nobullet means that a <ul> has a class of nobullet.

Example: <ul class="nobullet">

.nobullet ul means that a parent element of <ul> has a class of nobullet.
Example: <div class="nobullet"><ul>....</ul></div>

**AutisticCuckoo** · Oct 13, 2008 08:18

Originally Posted by BoltZ

.nobullet ul means that a parent element of <ul> has a class of nobullet.

To be specific, it means that an ancestor of the <ul> has a class of nobullet. It can be the parent, a grandparent, a grand-grandparent, etc.

**RyanReese** · Oct 13, 2008 09:27

It's just my way of talking, I always say parent element when I refer to an acestor.

**AutisticCuckoo** · Oct 13, 2008 11:02

Just thought I'd clarify things, in case someone who doesn't talk the way you do happens to find this thread some time in the future.

**Crazymik3** · Oct 13, 2008 11:03

I've never used this before, and I totally forgot that I was able to do this!
Hopefully I can implement this the next time I'm coding something up!

Thanks for reminding me! :P

**RyanReese** · Oct 13, 2008 11:25

I never say ancestor element because trying to remember grandparent element, etc would confuse me. I KNOW what I mean by parent element so if in the future you hear me talking like this treat it as a speaking disorder

.