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: