Difference between CSS2 and CSS3

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.
attribute ending matches exactly
element[foo$="bar"]
The element has an attribute called foo that ends with "bar" e.g.
attribute contains the match
element[foo*="bar"]
The element has an attribute called foo that contains the string "bar" e.g.

16 new pseudo-classes:

:root
The root element of the document. In HTML this is always
: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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Lalit M15y ago
Hi...

CSS 3 supports multiple backgrounds, but in CSS2 you cannot.
Read More here
0
Hemant Kumar15y ago
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.
- attribute ending matches exactly
  element[foo$="bar"]
  The element has an attribute called foo that ends with "bar" e.g.
- attribute contains the match
  element[foo*="bar"]
  The element has an attribute called foo that contains the string "bar" e.g.
16 new pseudo-classes:
- :root
  The root element of the document. In HTML this is always
- :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
0