CODEWITHSUNDEEP
css
benhowdle89
benhowdle89

Reputation: 37464

How can I use the same CSS attribute on several selectors?

Please say there's a simpler/shorter way to write this CSS:

.ads h3{
color: #f7f7f7;
}
.ads p{
color: #f7f7f7;
}
.ads blockquote{
color: #f7f7f7;
}

It's a right pain at the moment and takes up space in the CSS file...

Upvotes: 3

Views: 200

Answers (7)

Jeff
Jeff

Reputation: 14279

Unless there are any other overriding rules you haven't shown, this will be fine:

.ads 
{
color: #f7f7f7;
}

Upvotes: 1

David Hoerster
David Hoerster

Reputation: 28701

You don't need the trailing ; either (per YUI CSS Min)

.ads h3,.ads p,.ads blockquote{color:#f7f7f7}

Upvotes: 0

Alpine
Alpine

Reputation: 3858

You can write it like this to make it simpler/shorter.

.ads h3, p, blockquotes{
color: #f7f7f7;
}

Upvotes: 1

arnorhs
arnorhs

Reputation: 10429

God says: "Yes"

"Your prayers have been answered my child"

.ads h3, .ads p, .ads blockquote {
    color: #F7F7F7;
}

And even taking it further (if there are no child elements which should not be colored as well):

.ads * {
    color: #F7F7F7;
}

And if you're OK with the text inside the paragraph itself to also have this same gray color:

.ads {
    color: #f7f7f7;
}

This will be overridden by any other styles that have been set on p, blockquote or h3, so you might want to take it further:

.ads, .ads * {
    color: #f7f7f7;
}

Upvotes: 6

Ruy Diaz
Ruy Diaz

Reputation: 3122

.ads h3,
.ads p,
.ads blockquote {
  color: #f7f7f7;
}

Upvotes: 0

Bogdan Silivestru
Bogdan Silivestru

Reputation: 146

.ads h3, .ads p, .ads blockquote{
  color: #f7f7f7;
}

Upvotes: 0

Donut
Donut

Reputation: 112825

You can group selectors that you wish to share common rules by separating them with commas. So, the following will work:

.ads h3, .ads p, .ads blockquote {
   color: #f7f7f7;
}

See the CSS 2.1 Specification, Section 5.2.1.

Upvotes: 7

Related Questions