CODEWITHSUNDEEP
cssclass
IGGt
IGGt

Reputation: 2759

adding css class to multiple elements

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".

Upvotes: 46

Views: 155271

Answers (4)

besluitloos
besluitloos

Reputation: 269

Try using:

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

Also, read up on CSS.

Edit: If it were me, I'd add the button class to the element, not to the parent tag. Like so:

HTML:

<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

CSS:

.button {
    // css stuff
}

For specific css stuff use:

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

Upvotes: 9

Dan
Dan

Reputation: 121

try this:

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

That will apply the style to all a tags nested inside of <p class="button"></p>

Upvotes: 1

scottlimmer
scottlimmer

Reputation: 2268

.button input,
.button a {
    ...
}

Upvotes: 3

James Allardice
James Allardice

Reputation: 165971

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'".

Upvotes: 79

Related Questions