CODEWITHSUNDEEP
htmlcsswordpress
anonymoose
anonymoose

Reputation: 1243

How might I simplify this CSS?

I'm working with WordPress and have been killing myself tonight with this CSS. I finally have gotten things to work as follows however I'm sure there's a way to clean it up. I've tried several articles without luck, formatting and reformatting. Anyways, here's my code:

.postid-5648 #masthead {
    display: none;
}
.postid-5648 #colophon {
    display: none;
}
.postid-5365 #masthead {
    display: none;
}
.postid-5365 #colophon {
    display: none;
}

I've tried things like this, without luck:

.postid-5648, .postid-5365, #masthead, #colophon {
    display: none;
}

Thanks in advance!

Upvotes: 2

Views: 96

Answers (4)

Minal Chauhan
Minal Chauhan

Reputation: 6158

If your class start with .postid-, you can used * selector like this,

[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
   display: none;
}


[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
   display: none;
}
<div class="postid-5648">
  <div id="colophon">colophon</div>
  <div id="masthead">masthead</div>
</div>
<div class="postid-5365">
  <div id="masthead">masthead</div>
  <div id="colophon">colophon</div>
</div>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12969

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

[class^="postid-"] #masthead,
[class^="postid-"] #colophon {
     display: none;
}

Note:[class*="postid-"] is wrong because accept xxpostidxx-5648.

Upvotes: 0

Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

You can group them all together like: 

.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
    display: none;
}

This enables subsequent contributors to have a clear understanding of the flow of the document.

Just go through CSS Coding Standards

Upvotes: 0

Sankar
Sankar

Reputation: 7117

Grouping selectors - If more than one CSS selectors have same CSS declarations, they can be grouped together.

selector1, selector2, selector3,.................................. selectorN 
{property : value; .......... }

Where selector1, ......... selectorN are different selectors. Notice that here selectors are separated with ","combinators.

.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
  display: none;
}

Upvotes: 4

Related Questions