Published on: 04 August, 2013

CSS Selectors

Posted by andy | 1808 views 0 likes 0 favourites 0 comments
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>
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>

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.