CSS3 is based on CSS 2.1 specification and is completely backward compatible with CSS2.
The old specification of CSS2.1 was becoming too large and complex to update as one unit, hence development of CSS3 specification is split up into Modules. Modules can evolve independent of each other.
It adds new features for developers to solve a number of design problems without the need for non-semantic markup, complex scripting, or extra images.
Main Features that are included in CSS3 include
o Support for additional selectors.
o Drop shadows,
o Rounded corners,
o Multiple backgrounds,
o Gradients,
o Animation,
o Transparency and many more…
The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties have been implemented in modern browsers.
o New Selectors
o Backgrounds and Borders
o Gradient Effects
o Text Effects and Fonts
o Transformations
o Transitions
o Animations
o Multiple Column Layout.
CSS 3 New Selectors
In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns.
Using selectors Styles can be applied selectively.
| Selector | Example | Description |
|
[attribute^=value] |
a[href^=”https”] |
Selects every <a> element whose href attribute value begins with “https” |
|
[attribute$=value] |
a[href$=”.pdf”] |
Selects every <a> element whose href attribute value ends with “.pdf” |
|
[attribute*=value] |
a[href*=”deccansoft”] |
Selects every <a> element whose href attribute value contains the substring “deccansoft” |
|
E1~E2 |
p~ul |
Selects every <ul> element that are preceded by a <p>
element |
| E:checked | input:checked | Selects every checked <input> element |
| E:disabled | input:disabled | Selects every disabled <input> element |
| E:enabled | input:enabled | Selects every enabled <input> element |
|
E:empty |
p:empty |
Selects every <p> element that has no children (including text
nodes) |
| E:last-child | p:last-child | Selects every <p> element that is the last child of its parent |
| E:only-child | p:only-child | Selects every <p> element that is the only child of its parent |
|
E:nth-child(n) |
p:nth-child(2) |
Selects every <p> element that is the second child of its
parent |
|
E:nth-last-child(n) |
p:nth-last-child(2) |
Selects every <p> element that is the second last child of its parent. |
|
E:first-of-type |
p:first-of-type |
Selects every <p> element that is the first <p> element of its
parent |
|
E:last-of-type |
p:last-of-type |
Selects every <p> element that is the last <p> element of its
parent |
|
E:only-of-type |
p:only-of-type |
Selects every <p> element that is the only <p> element of its
parent |
|
E:nth-of-type(n) |
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
|
E:nth-last-of-type(n) |
p:nth-last-of-type(2) |
Selects every <p> element that is the second last <p> element of its parent. |
| E:in-range | input:in-range | Selects input elements with a value within a specified range |
| E:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
| E:invalid | input:invalid | Selects all input elemets with an invalid value |
| E:valid | input:valid | Selects all input elements with a valid value |
| E:not(selector) | :not(p) | Selects every element that is not a <p> element |
| E:optional | input:optional | Selects input elements with no “required” attribute |
| E:read-only | input:read-only | Selects input elements with the “readonly” attribute specified |
|
E:read-write |
input:read-write |
Selects input elements with the “readonly” attribute NOT
specified |
| E:required | input:required | Selects input elements with the “required” attribute specified |
| E:root | :root | Selects the document’s root element |
|
E:target |
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
Live Demo of CSS3 Selectors