CSS Basics CSS Selectors_Basic Tutorial

Example:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2. Type selector
Syntax:

E { sRules }

Description:
Type selector. Use the document language object (Element) type as the selector.
Example:

td { font-size:14px; width:120px; }

a { text-decoration:none; }

3. Attribute selector
Syntax:

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }

Description:
Attribute selector.
Select E with attr attribute
Select E with attr attribute whose value is equal to value
Select E with attr attribute whose value is a space-separated list of words, one of which is equal to value . The value here cannot contain spaces
Select the E that has the attr attribute and the attribute value is a list of words separated by hyphens, starting with value
Example:

h[title] { color: blue; }

/* All h objects with title attribute */



span[class=demo] { color: red; }



div[speed="fast"][dorun="no"] { color: red; }



a[rel~="copyright"] { color :black; }

4. Contains selectors
Syntax:

E1 E2 { sRules }


Description:
Contains selectors. Selects all E2 contained by E1 . That is, E1.contains(E2)==true.
Example:

table td { font-size:14px; }



div.sub a { font-size:14px; }

5. Sub-object selector
Syntax:

E1 > E2 { sRules }

Description:
Sub-object selector. Selects all E2 that are children of E1 .
Example:

body > p { font-size:14px; }

/* The font size of all p objects that are child objects of body is 14px */



div ul>li p { font-size:14px; }

6.ID selector
Syntax:

#ID { sRules }


Description:
ID selector. Use the ID as the unique identifier of the object in the document tree (DOM) as the selector.
Example:

#note { font-size:14px; width:120px;}

7. Class selector
Syntax:

E.className { sRules }

Description:
Class selector.This selector can be used in HTML. Its effect is equivalent to E [ class ~= className ]. See Attribute Selectors.
In IE5, you can specify more than one value ( className ) for the class attribute (property) of an object by specifying a set of style sheet class names separated by spaces. For example:

.
Example:

div.note { font-size:14px; }

/* The font size of all div objects whose class attribute value is equal to (including) "note" is 14px */



.dream { font-size:14px; }

/* The font size of all objects whose class attribute value is equal to (including) "note" is 14px */

8. Selector grouping
Syntax:

E1 , E2 , E3 { sRules }

Description:
Selector grouping. To apply the same definition to multiple selectors, you can combine the selectors into comma-separated groups.
Example:

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px; }


9. Pseudo-class and pseudo-object selectors

Syntax:

E: Pseudo-Classes { sRules }

E: Pseudo-Elements { sRules }
Description:
Pseudo-class and pseudo-object selectors.
Pseudo-class selector. See Pseudo-Classes[:link :hover :active :visited :focus :first-child :first :left :right :lang].
Pseudo-object selector. See Pseudo-Elements[:first-letter:first-line:before:after].
Example:

div:first-letter { font-size:14px; }

a.fly :hover { font-size:14px; color:red; }