Applying CSS to multiple pages by page id

• 

  andrewhallnz · Member · Jan 10, 2016 at 5:57 am

  • Copy link
  • Add topic to favorites

  In the absence of CSS I get:

  http://sufinz.com/test-category-no-css/

  With the following CSS I get http://sufinz.com/test-category/

  #post-1943  a.title {
  	font-size: 22px;
  	font-weight: bold;
  	text-decoration: none;
  	color: black;
  }
  
  #post-1943  a.title:hover {
  	color: crimson;
  }
  
  #post-1943 ul.display-posts-listing {
  	list-style: none;
  	margin-left: 0;
  }

  Perhaps there is a more elegant and shorter way of writing that?

  More importantly, if I want to use this CSS on say 12 different pages, each identified by #post-#### is there a way to do it without simply duplication the code above 12 times.

  Thank you for any help

  Andrew

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Jan 10, 2016 at 6:10 am

  • Copy link

  #post-#### is called selector. Everything between { and } are rules.

  You don’t have to duplicate rules if you separate selectors by commas.

  For e.g.

  #post-1943  a.title,
  #post-1234 a.title {
  	font-size: 22px;
  	font-weight: bold;
  	text-decoration: none;
  	color: black;
  }

  You can have as many comma separated selectors as you wish and they all use the same rules.

• 

  andrewhallnz · Member · Jan 10, 2016 at 6:30 am

  • Copy link

  Ahhhh, I tried

  #post-1943,
  #post-1234 a.title { }

  which of course was wrong :-)

  Thank you

  Andrew