Short Notes & Video Tutorials on Business & Computer

SignUp as a Member Member Login   
Go to Our Training Videos Section

CSS Selectors: Reference
[ More Web Site Development ][ More Web Site Development ]

By Sayed Ahmed on 0000-00-00

Share with title  

CSS Selector Examples and Notes (check each line carefully and notice differences with other ( esp. immediate) lines):
(Reference: CSS: The Definitive Guide: 3rd Edition: by E. A. Mayer:)

  1. Basic Rules: The following css rules apply to the corresponding html/xml elements/tags (left of { ) as found anywhere in the scope (html/xml files) of these css rules
    html {color: black; }
    h1 {color: gray; }
    h2 {color: silver; }
    p {font: medium Helvetica; }
    QUOTE {color: gray; }
    BIB {color: red; }
  2. Grouping: Applies to all html/xml elements as mentioned before { with commas
    h2, p {color: gray; }
    body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray; }
    h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0. 5em;}
    border: 1px solid black; font-family: Charcoal, sans-serif; }
    Remember: if you miss a semicolon (;), the rest (not the previous ones) of the css properties will be ignored
  3. Class and ID selectors: Apply to all html/xml elements as mentioned before { with commas
    p {font-weight: bold; } : Applies to any p
    p.warning {font-weight: normal; } : Apply to any p tags with class set to 'warning' : Example: <p class="warning" ...
    *. warning {font-weight: bold; } : Apply to any html/xml elements with class attributes set to 'warning'
    .warning {font-style: italic; }
    span. warning {font-weight: bold; }: only span tags with class attributes set to warning
    .warning.urgent {background: silver; }: Apply to elements having both values in class attributes. Example: <p class='warning urgent' {background: red; }: Example use: <p class="urgent warning help" ....

  4. ID selectors: Apply to elemens having the ID as provided in css class declaration. One document can have only one ID with the same value. Though CSS cannot idenntify that. Using the same ID for multiple elements is a bad practice (will have side-effects with JS/DOM).
    *#first-para {font-weight: bold; }: Apply to elements with ID attributes set to first-para:
    Example: <p id="lead-para" ....
    #lead-para {font-weight: bold; } : is also valid

  5. Attribute selectors: IE7 will support. <= IE6 will not support. Supported by Safari, Opera, and Gecko based browsers
    h1[class] {color: silver; } : Apply to any h1 elements with class properties set to anything
    planet[ moons] {font-weight: bold; } : Great for XML
    *[title] {font-weight: bold; } : Apply to any tags with title attributes
    a[href] [title]{font-weight:bold;} : Apply to any a elements with both href and title attributes
    a[href="http: //"] {font-weight:bold;} : Apply to any a elements with href attributes set to
    p[ class~="warning"] {font-weight: bold; }: Apply to any p elements with class attribute values contain 'warning'
    img[ title~="Figure"] {border: 1px solid gray; } : Apply to any img elements with title attribute values contain 'Figure' as a word
    [ foo^="bar"] : begins with "bar".
    [ foo$="bar"] : ends with "bar".
    [ foo*="bar"]: having bar as a substring
    Particular attribute selectors: *[lang| ="en"] {color: white;} : Apply to any elements whose lang attributes are set to en or begin with en

  6. Selecting descendants
    h1 em {color: gray; } : Applies to any em elements at any depth but under h1
    ul ol ul em {color: gray; }: Any emphasized text under unordered list that is part of an ordered list that itself is under an unordered list
    h1 > strong {color: red; }: Strong immediately after h1 (not to strong at any depth below h1)
    h1 + p {margin-top: 0; } : to both h1 and p (as siblings in a document) that have a common parent
    html > body table + ul{margin-top: 1. 5em; } :

  7. Pseudo classes:
    a: visited {color: red; } : Any visited anchor tags
    a: link {} : any anchor tags
    a: hover {} : any anchor tags - on mouse over
    a: focus {} : any anchor tags - on focus
    a: active {} : any anchor tags - on active
    a#footer-copyright: visited{font-weight: bold; }: any visited anchor tag with id footer-copyright
    p: first-child {font-weight: bold; }
    a: visited: hover {color: maroon; }
    p: first-letter {color: red; }
    p: first-line {color: purple; }
    h2: before {content: "] ] "; color: silver; } : styling before h1 elements
    body: after {content: " The End. "; }

Rate The Article: 1   2   3   4   5  
Rated: 0/5 by 0 Users

SignUp as a Member Member Login   

Further Reading


CSS Topics to learn

Web Site Development

How to Use Multiple Browsers on a Single Machine

Online Resources: Photoshop Tutorial/Courses in Computer Graphics

Tutorials on Photoshop Tools

Image Types to be used in Web-Sites

Transparent Background using CSS

CSS Selectors: Reference

Lesson 1: How to build a simple website from scratch

Search Engine Optimization

Very Useful Resource for Search Engine Optimization


Cool PHP Libraries to Use in Your Projects

Please note that our sole purpose is to provide useful contents/information

Creative Commons License
This work by is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Privacy Policy Terms of Service

Warning: mysqli_close(): Couldn't fetch mysqli in /home4/m4p2f2v3/ on line 14