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}
    In the above example all h1-h6 elements will be rendered in a blue color and bold font.
    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>
    Note: For child selectors to work in IE a <!DOCTYPE> must be declared.

© 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.