CSS Selector can be considered as pattern matching element of HTML, it can be a html tag, or an attribute of id or a class inside the html tag itself. Pattern matching in CSS is a case sensitive, so please make sure you define the name exactly the same case in html page. See the following illustration of a simple page that contains the basic html tag, id and class attributes.
| Pattern | Definition | Example |
| * | Matches with any html tag or element | body, html, p, input, div, select, textarea |
| div | Match only to div tag |
/** example of css **/
div {font-size: 13px;}
|
| div, p | Matches div or p tag |
/** example of css **/
div, p {font-size: 13px;}
/** example of html **/
<p>Inside the paragraph text</p>
<div>Inside the div text</div>
|
| div.header | Matches div tag with header class |
/** example of css **/
div.header {font-size: 13px;}
/** example of html **/
<div class="header">div with class header on it.</div>
|
| p > span | Will match all the span tag under the p element |
/** example of css **/
p > span {font-size: 13px;}
/** example of html **/
<p><span>Span text inside the p tag </span></p>
|
| div#header | Matches div tag with header ID |
/** example of css **/
div#header {font-size: 13px;}
/** example of html **/
<div id="header">div with header ID on it.</div>
|
| :link :visited |
Match element of a hyperlink where if the link is not visited (:link) and already visited (:visited) |
/** example of css **/
a:visited {color:red;}
a:link {color:blue;}
/** example of html **/
Click here to get more information
<a href="#enteryourlinkhere">Click here to get more information</a>
|