CODEWITHSUNDEEP
htmlcss
KyleMit
KyleMit

Reputation: 30277

Define rule for set of child elements

As an example, I want labels and input fields within a certain class to have similar rules.

CSS

.SpecialBox input, label{
    background-color: green;
}

When I use the previous code, what it actually does it apply the rules to any input field within a SpecialBox and ALL labels because the ruleset applies each of the comma separated items:

I can modify the selector to clarify both items individually

.SpecialBox input, .SpecialBox label{
    background-color: green;
}

In which case I get the desired result, but at the expense of being concise

Here's a fiddle to demonstrate

Is there a way to apply a set of rules to all children of a particular selector, or am I forced to repeat the parent element selector?

I believe there is a way to do this with SASS or LESS, but I'd prefer to do this with straight CSS

Upvotes: 0

Views: 76

Answers (3)

YD1m
YD1m

Reputation: 5895

Use * selector:

.SpecialBox  *

Upvotes: 0

Schleis
Schleis

Reputation: 43790

For only the input and label elements, you would have to repeat the selector.

If you want all children, you can use the wildcard: .SpecialBox * This will apply the style to ALL of the children.

Upvotes: 1

koningdavid
koningdavid

Reputation: 8095

just use the class .SpecialBox *?

Upvotes: 0

Related Questions