Style only if it has 2 classes

I don’t know if this is possible but is there a way with only css to trigger an element only when 2 classes are set to it, for example if I have


.someanchor {
color: #FFF;
}
.someanchor {
color: #000;
}
<a class="someanchor"></a>
<a class="someanchor lastanchor"></a>

I want to be able to have the anchor with someanchor class applied to it, to display in white text but black, when it has the 2 classes, I don’t have the option to remove the first class

[font=verdana]If you mean, can I style an element that has any two classes attached then the answer is ‘no’, but I suspect that isn’t what you meant.

You can style an element that has two specified classes attached by

a.someanchor.lastanchor {color:#000;}

But there may be other ways that give you a slightly better code base (I’m not saying that these definitely are better, just that I would consider them as possible alternatives), for example:

[list][]a.lastanchor {color:#000 !important;} will override any conflicting declarations
[
]using an ID rather than a class, if there’s only going to be one on the page, will take precedence over class styling
[*]use the cascading part of CSS – this is bad code:

[color="#dd0000"]<div>
<a class="someanchor">...</a>
<a class="someanchor">...</a>
<a class="someanchor lastanchor">...</a></div>

.someanchor {...}
.someanchor.lastanchor {...}[/color]

but this is good code:

[color="green"]<div class="somesection">
<a>...</a>
<a>...</a>
<a class="lastanchor">...</a></div>

.somesection a {...}
.somesection .lastanchor {...}[/color]

Now I appreciate that you might not be able to change the code structure to that extent, but if you can then it’s worth looking into.[/list][/font]

Your code example is a bit confusing.

.someanchor {
color: #FFF;
}
.someanchor {
color: #000;
}

if you are doing this the the second declaration overrides the first. So text in all elements with the class someanchor will be #000. As mentioned above you could chain the styles, being careful with specificity.


.style2.style1 {
color: pink;
float:left;
}
.style1 {color: #FFF;
font-size:200%;
background:red;
}
.style2 {
color: #000;
background:cyan;
}

In the above, the text will be pink and the element floated left ONLY if the element itself has both classes (class=‘style1 style2’). Note also that the bg for the element will end up beign cyan; since .style1 and .style2 both try to set the bg color AND HAVE THE SAME SPECIFICITY, the later one in the code is applied. in the case of .style2.style1 color rule is applied because the rule has two classes thus greater specificity than a rule with just one class.

Also note you could achieve the same with wraps and et greater control over the cascade


<p class="style1"><a href="#" class="style1">link</a><a href="#" class="style2">link</a></p>
<p class="style2"><a href="#" class="style2">link</a><a href="#" class="style2">link</a></p>
.style2. style1 {
color: pink;
float:left;
}.
style1. style2 {
color: blue;
float:right;
}
.style2. style2 {
color: purple;
display:block
}
.style1. style1 {
color: green;
display:block
}
.style1 {color: #FFF;
font-size:200%;
background:red;
}
.style2 {
color: #000;
background:cyan;
}

its important to note that specificity applies by COUNT despite names.
so: .strageClass .style2{} has the same “importance” as .style1 .style2{}, and rules ror the one that is later in the CSS code will override rules for the previous.
hope that helps

I misspelled the CSS rules one was someanchor the other one lastanchor, I only need to trigger the background and color basically the setup generates a menu just like this


<ul>
<li id="32" class="menu-item">
<a>abd</a>|
</li>
<li id="45" class="menu-item">
<a>abd</a>|
</li>
<li id="65" class="selected menu-item">
<a>abd</a>|
</li>
</ul>

so I have access to the id which will not change for a long time, and the classes selected and menu-item selected is page where I am on, they all have black background white text and when selected white background black text, that one I have setup however the last | when not selected is black and I want to change it so when it is selected it turns white, the rest of | are always white

Remember what is aid about specificity!!

This is the stupid thing about WP. If they had let you put a class on the UL (.menu) you could have had this:

.menu li { styles}
.menu .selected { other styles}

still, you can handle it this way ( since we know that everything is an LI in what we are trying to target)

.menu-item { styles;}
li.selected {styles;}

if you have MANY menus throughout your page… you can use an additional class or ID:

#main .menu-item { styles;}
#main li.selected {styles;}
#side .menu-item { styles;}
#side li.selected {styles;} #main .menu-item { styles;}
.alt .menu-item { styles;}
.alt li.selected {styles;} #main .menu-item { styles;}

as long as you keep an eye on specificity… you should be fie with the above pattern

I wonder how you figured it was a wordpress issue, I usually work with Joomla and have come across problems but usually they are because I am trying to do something very special but I find that this kind of thing should be core in wordpress like being able to remove the separator from the last item or at least have a class added to it so we can easily add a CSS rule in the stylesheet, I started working with wordpress and have come across plenty of situations where you might think it should be part of the core functionality to then find out it is not “what?” anyway, thank you for all your help!!!

I wonder how you figured it was a wordpress issue,

lol. I took a gamble. I use Joomla! and WP on occasion. My biggest pet peeve about these CMSs is that their code assumes usage and adds classes to everything… THEN there is the true tell-tale sign. Your template probably uses one the WP_LIST tags… which generate the LI items, and adds all sort of class names, which are actually necessary if you use deliberate CSS coding techniques.

And you are welcome.