How to create a combined class selector

hey folks,
i m trying to finger out how to make a ul li a with some class come together is one selector. i can’t make them all work together having same class. can anyone help me out?

Hi,

Why don’t you just “class them up” then :slight_smile:

You can add a class to each list item and the you can target the list and the anchor uniquely.
e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.test {
    list-style:none;
    margin:0;
    padding:0;
    border:5px solid #000;
    float:left;
}
.test li,.test li a {
    float:left;
    text-decoration:none;
    margin:2px;
    padding:2px;
}
li.one {border:1px solid red}
li.two {border:1px solid orange}
li.three {border:1px solid teal}
li.one a {
    background:blue;
    color:#fff
}
li.two a {
    background:green;
    color:blue
}
li.three a {
    background:yellow;
    color:#000
}
</style>
</head>
<body>
<ul class="test">
    <li class="one"><a href"#">list 1</a></li>
    <li class="two"><a href"#">list 2</a></li>
    <li class="three"><a href"#">list 3</a></li>
</ul>
</body>
</html>


Or did you mean you wanted to do it without changing the html?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.test {
    list-style:none;
    margin:0;
    padding:0;
    border:5px solid #000;
    float:left;
}
.test li,.test li a {
    float:left;
    text-decoration:none;
    margin:2px;
    padding:2px;
}
.test li {border:1px solid red}
.test li + li {border:1px solid orange}
.test li + li + li {border:1px solid teal}
.test li a {
    background:blue;
    color:#fff
}
.test li + li a {
    background:green;
    color:blue
}
.test li + li + li a {
    background:yellow;
    color:#000
}
</style>
</head>
<body>
<ul class="test">
    <li><a href"#">list 1</a></li>
    <li><a href"#">list 2</a></li>
    <li><a href"#">list 3</a></li>
</ul>
</body>
</html>


Won’t work in ie6 though :slight_smile:

my bad if u can’t understand. here is the deal


<ul>
<li><a href"#">list 1</a></li>
<li><a href"#">list 2</a></li>
<li><a href"#">list 3</a></li>
</ul>

now i wanna class them up and also the a anchor tag with some class coz if i don’t class <a> tag, it will apply the css to all <a> in my page.

I’m afraid I don’t really understand you. I’d recommend you re-read your original post, and come up with a coherent post so we can understand. What do you mean “I can’t make them all work together having the same class”?

If you need elements to have the same class, but they are different elements, then you can differentiate between them like this

div.someClass{}
p.someClass{}
a.someClass{}

Etc etc. If that isn’t what you meant, please make it so we can understand you better (well, I know I at least need a clearer post, someone else may be able to understand you) :slight_smile:

Got it.

You have syntax errors.


<style type="text/css">
<html>
<head>
ul.tabs{list-style:none; width:100%;}
.tabs li{float:left; margin:2px; padding:5px; border:1px solid red;}
.tabs li a{text-decoration:none;}
tabs li,ul.tabs{display:inline; margin:0}
.tabs li a {display:block;}
</style>
</head> 

You can’t <tag1><tag2></tag1></tag2>, that’s improper nesting. Style tags need to be inside the <head>.

Your declarations of “list-style: none; width: 100%” for ul.tabs is being overwritten by the
ul.tabs{display: inline; …} declaration. Inlines cannot have state widths, so it’s no longer 100% wide.
“tabs li” does not exist, but if it did, it would be ignored because you already floated them, so you cannot make them inlines now without first saying “float: none” (and if you have that for IE6, then put it in the first declaration and remove the other one).

There seem to be no active styled mentioned in your CSS code either way. If this
<li class=“tabactive” style=“background-color:#3ca2d3;”><a href=“#”>List</a></li>
is supposed to be a selected (not :active) tab, then you’re close. You’d do this

<li class=“selected”><a href=“#”>a list</a></li>

and in the css

li.selected {
special selected styles, such as the background colour…
background-color: #3ca2d3;
}

Does that make sense? So on the next page, the class=“selected” is moved to a different li, and the CSS doesn’t have to change.

one thing more. i don’t want any elements to float next to my menu of ul and li. on which element should i clear on? here is my page


<style type="text/css"> 
<html>
<head>
ul.tabs{list-style:none; width:100%;}
.tabs li{float:left; margin:2px; padding:5px; border:1px solid red;}
.tabs li a{text-decoration:none;}
tabs li,ul.tabs{display:inline; margin:0}
.tabs li a {display:block;}
</style> 
</head> 
 
<body> 
<ul class="tabs"> 
	<li class="tabactive" style="background-color:#3ca2d3;"><a href="#">List</a></li> 
    <li><a href="#">List 2</a></li> 
    <li><a href="#">List 3</a></li> 
</ul> 
<table width="800" border="1"> 
	<tr> 
    	<td></td> 
        <td></td> 
        <td></td> 
    </tr> 
</table> 
</body> 
</html> 

now for the time being i am giving inline css background to have a background color for active state. how can i class them up? and as i said before my table is floating next to menu which i don’t want

stomme i reedited my post to tell what’s wrong. have a look :slight_smile:

oh man. i m so blinded. thanks a lot stomme

Syntax error.

li.selected{background-color:3ca2d3;}

No # in front of the colour. : )

Do you mean, a class that makes the anchor who was clicked look different because now the user is on that page?

If you need to add a pseudo-state to a classed element, it looks like this:

a.theclass:active

li.theclass:hover

etc.

i gave the active li class selected but its not giving any out put :frowning:


<ul class="tabs"> 
           <li class="selected"><a href="tab1.php">Tab1</a> </li> 
            <li> <a href="tab2.php">Tab 2</a> </li> 
</ul> 


ul.tabs{list-style:none; width:100%;}
.tabs li{float:left; margin:2px; padding:5px; background:#b2b2b2;}
.tabs li a{text-decoration:none;}
tabs li,ul.tabs{display:inline; margin:0}
.tabs li a {display:block;}
.tabs a{color:#FFF;}
li.selected{background-color:3ca2d3;}

thnx paul!

Off Topic:

how you been doing? paul and Ryan

:active only refers to the actual clicking part. The active state is gone as soon as the user lets up on the button.

i tried active but it won’t work :frowning:

paul. how do i make a:active class for the active ones ?

Or if you just want the anchors in that ul all different then use the class on the ul.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.test {
    list-style:none;
    margin:0;
    padding:0;
    border:5px solid #000;
    float:left;
}
.test li{
    float:left;
    margin:2px;
    border:2px solid red;
}
.test li a {
    float:left;
    text-decoration:none;
    margin:2px;
    padding:2px;
    background:blue;
    color:#fff;
}
</style>
</head>
<body>
<ul class="test">
    <li><a href"#">list 1</a></li>
    <li><a href"#">list 2</a></li>
    <li><a href"#">list 3</a></li>
</ul>
</body>
</html>