Question

I have created a CSS class called ‘button’ and applied it to all of my INPUT tags by simply using :

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

which works fine, but I then added another button, but this isn’t part of my form, it is just a place holder which is trigerred with javascript, and opens an iFrame. As I wanted it to look the same as all the ‘real’ buttons I used the same class.

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

The Problem I had was that if I left the class as .button input the <a> tag didn’t see it. If I removed the input part of the CSS all my buttons got grey squares in the middle.

So I resolved it with .button input,a

This worked fine. . . Until I looked at another page, and found all of my <a> tags were now formatted with the ‘button’ class, even though they don’t have this class applied.

My question then is how can I apply the same CSS class to <input> and <a> tags at the same time, but only if I have explicitly added class="button".

Answer 1

You need to qualify the a part of the selector too:

.button input, .button a {
    //css stuff here
}

Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.

Your original selector therefore matched “all elements of type ‘input’ that are descendants of an element with the class name ‘button’, and all elements of type ‘a'”.