Monday, 17 August 2009

Advanced CSS selectors, introducing more specific CSS elements

Though most of this article still is an object of my study and guide for my practice, and I can't say I master this, yet this article is a very helpful reference for either testing or even using these Advanced CSS Selectors in the creating of a modern website. Despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans. Below are the major points from this article:

Taming Advanced CSS Selectors

CSS Specificity
  1. 1. Attribute selectors
  2. 2. Child selector
  3. 3. Sibling combinators
    - Adjacent sibling combinator
    - General sibling combinator
  4. 4. Pseudo-classes
    - Dynamic pseudo-classes
    - :first-child
    - The language pseudo-class
  5. 5. CSS 3 Pseudo-classes
    :target
The UI element states pseudo-classes
  1. 6. CSS 3 structural pseudo-classes
    - :nth-child
    - :nth-last-child
    - :nth-of-type
    - :nth-last-of-type
    - :last-child
    - :first-of-type and :last-of-type
    - :only-child
    - :only-of-type
    - :empty
  2. 7. The negation pseudo-class
  3. 8. Pseudo-elements
    - ::first-line
    - ::first-letter
    - ::before and ::after
Continue to read this article, with more explanations and also examples - Taming Advanced CSS Selectors (via smashingmagazine).

No comments:

Post a Comment

Leave me a comment below if you liked this article - what do YOU think about it?