Web
Analytics
CSS3 Introduction and Selectors - Tutorial

For Consultation : +91 9887575540

Stay Connected :

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.

SelectorExampleDescription
 

[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:checkedinput:checkedSelects every checked <input> element

 

 

E:disabledinput:disabledSelects every disabled <input> element
E:enabledinput:enabledSelects every enabled <input> element
 

E:empty

 

p:empty

Selects every <p> element that has no children (including text

nodes)

E:last-childp:last-childSelects every <p> element that is the last child of its parent
E:only-childp:only-childSelects 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-rangeinput:in-rangeSelects input elements with a value within a specified range
E:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
E:invalidinput:invalidSelects all input elemets with an invalid value
E:validinput:validSelects all input elements with a valid value
E:not(selector):not(p)Selects every element that is not a <p> element
E:optionalinput:optionalSelects input elements with no “required” attribute
E:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified
 

E:read-write

 

input:read-write

Selects input elements with the “readonly” attribute NOT

specified

E:requiredinput:requiredSelects input elements with the “required” attribute specified
E:root:rootSelects 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

 

Select your currency