CSS3 Property Selector

<div id= "Section1" > Sample text 1</div>

<div id= "Subsection1-1" > Sample text 1-1</div>

<div id= "Subsection1-2" > Sample text 1-2</div>

<div id= "Section2" > Sample text 2</div>

<div id= "subsection2-1" > Sample text 2-1</div>

<div id= "subsection2-2" > Sample text 2-2</div>

Use the property selector in CSS2 to set

<style type=text/css>

[id = Section1] {

Background:yellow;

}

</style>

The property selector in CSS3

1.[att*=val] Property value contains the character specified with Val

[Id*=section] {

Background:yellow;

}

The background color of the DIV element with id "Section1", "Subsection1-1", and "subsection1-2" in the page becomes yellow because the id attribute of these elements contains the "section" character.

2.[att^=val] Property value begins with the character identifier specified in Val, then the element uses this style

[Id^=val] {

Background:yellow;

}

The background color of the DIV element with id "Section1" and "Section2" in the page turns yellow because the id attribute of these elements has the beginning character "section".

3.[att$=val] End Word identifier character specified with Val

[Id$=\-1] {

Background:yellow;

}

The background color of the div element for "subsection1-1", "subsection2-1" in the page turns yellow because it ends with "-1".

Note: You must add "\" to the escape character before the specified match character.

CSS3 Property Selector