Published on: 04 August, 2013

CSS Selectors

Tumblr Digg Google Plus

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>
        

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.