How to Group CSS Selectors
How do we specify a group of selectors?
-
You can provide different types of selectors the same CSS style by providing
the selectors with a comma between each selector before setting
the declaration block that specifies the CSS style
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold}
Example of group selectors:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p.myclass, div>p {color:green} /* the last will give all p elements with a class='myclass' attribute and all p elements that is a child of a div element a green color*/ </style> </head> <body> <p class='myclass'>This paragraph is written in a green color</p> <div> Text inside the div tag follow all preset defaults. <p>direct child paragraph inside a div element is in a green color</p> <blockquote> <p>This is a paragraph inside a div element but not a direct child</p> </blockquote> </div> </body> </html>
© 2010 by Finnesand Data.
All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the
correctness in the pages or source codes.
The risk of using this web-site pages or any program
codes from this website is entirely at the individual user.