1. Computing

Discuss in my forum

What is the Difference Between CSS2 and CSS3

The Major Changes to CSS3

By

The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making it's way through the W3C in various stages of the recommendation process. CSS2 was submitted as a single document with all the Cascading Style Sheets information within it. Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules. As with any new specification, be sure to test your CSS3 pages thoroughly in as many browsers and operating systems as you can.

New CSS3 Selectors

CSS3 offers a bunch of new ways you can write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements.

Three new attribute selectors:

  • attribute beginning matches exactly
    element[foo^="bar"]
    The element has an attribute called foo that begins with "bar" e.g. <element foo="barn">
  • attribute ending matches exactly
    element[foo$="bar"]
    The element has an attribute called foo that ends with "bar" e.g. <element foo="rebar">
  • attribute contains the match
    element[foo*="bar"]
    The element has an attribute called foo that contains the string "bar" e.g. <element foo="rebaring">

16 new pseudo-classes:

  • :root
    The root element of the document. In HTML this is always <html>
  • :nth-child(n)
    use this to match exact child elements or use variables to get alternating matches
  • :nth-last-child(n)
    match exact child elements counting up from the last one
  • :nth-of-type(n)
    match sibling elements with the same name before it in the document tree
  • :nth-last-of-type(n)
    match sibling elements with the same name counting up from the bottom
  • :last-child
    match the last child element of the parent
  • :first-of-type
    match the first sibling element of that type
  • :last-of-type
    match the last sibling element of that type
  • :only-child
    match the element that is the only child of its parent
  • :only-of-type
    match the element that is the only one of its type
  • :empty
    match the element that has no children (including text nodes)
  • :target
    match an element that is the target of the referring URI
  • :enabled
    match the element when it's enabled
  • :disabled
    match the element when it's disabled
  • :checked
    match the element when it's checked (radio button or checkbox)
  • :not(s)
    match when the element does not match the simple selector s

One new combinator:

  • elementA ~ elementB
    match when elementB follows somewhere after elementA, not necessarily immediately
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS3
  6. What is the Difference Between CSS2 and CSS3

©2014 About.com. All rights reserved.