CSS Basic CSS Selector _ Basics Tutorial

Example:

*[LANG=FR] {font-size:14px; width:120px}

*.div {text-decoration:none;}


2. Type Selector
Grammar:

E {Srules}

Description
Type Selector. Takes a document language object (Element) type as a selector.
Example:

TD {Font-size:14px; width:120px;}

a {text-decoration:none;}

3. Property Selector
Grammar:

E [attr] {srules}

E [attr = value] {srules}

E [attr ~= value] {srules}

E [attr |= value] {srules}

Description
The property selector.
Select an E with the Attr property
Select an E with the Attr property and the property value equal to value
Select a list of words that have the Attr property and the property value is a space-delimited, with one equal to the value of E. The value here cannot contain spaces
Select a list of words with the Attr property and the property value to be delimited by a hyphen, starting with value E
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. Include selector
Grammar:

E1 E2 {Srules}


Description
Contains a selector. Select all E2 that are included in the E1. namely E1.contains (E2) ==true.
Example:

Table td {FONT-SIZE:14PX;}



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

5. Child Object Selector
Grammar:

E1 > E2 {srules}

Description
The child object selector. Selects all E2 as E1 child objects.
Example:

Body > P {font-size:14px;}

/* All child objects as body of the P object font size is 14px */



Div Ul>li p {font-size:14px;}

6.ID Selector
Grammar:

#ID {Srules}


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

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

7. Class Selector
Grammar:

E.classname {Srules}

Description
Class selector. You can use this type of selector in HTML. The effect is equivalent to E [Class ~= className]. See also property selector (attribute selectors).
In ie5+, you can specify more than one value (ClassName) for the object's Class property (attributes) by specifying the class name of a set of style sheets separated by spaces. For example: <div class= "Class1 class2" >.
Example:

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

/* All class attribute values equal to (inclusive) "Note" Div object font Size 14px * *



. Dream {FONT-SIZE:14PX}

/* All class attribute values equal to (include) "Note" The object font size is 14px */


8. Selector grouping
Grammar:

E1, E2, E3 {srules}

Description
The selectors are grouped. By applying the same definition to multiple selectors, you can separate the selectors by a comma and be a group.
Example:

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

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


9. Pseudo class and Pseudo object selector

Grammar:

e:pseudo-classes {Srules}

e:pseudo-elements {Srules}

Description
Pseudo class and Pseudo object selector.
The Pseudo class selector. See Pseudo Class (Pseudo-classes) [: Link:hover:active:visited:focus:first-child:first:left:right:lang].
The Pseudo object selector. See also pseudo object (pseudo-elements) [: First-letter:first-line:before:after].
Example:

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

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