Avoid unwanted HTML markup for styling a webpage using CSS3 Selectors – Humming Bird Web Developer Classroom – Mastering CSS3

This is the first edition in a Brand new series on CSS3 in the Humming Bird Web Developer Classroom – Mastering CSS3.

CSS selectors are powerful nifty markers, which enable the style sheets in adding styling to a web page. Selectors provide the web coder with a provision in identifying and picking specific page elements and then supplying individual visual style statements to it.

Without the selectors the powerful style sheet definition will be reduced to inline style statements only and will not have enabled the web coders to keep the content and their respective design separate and easy to manage. CSS Selectors make the web designers a happy folk by providing them with the power of choosing specific page elements and visually styling them all with a few lines of style sheet statements.

In this small article we are taking a look at some of the new yet powerful selectors available in CSS3 specification, which makes styling a webpage more easy and slick for a web designer. By using these new CSS3 selectors smartly, a lot of unwanted extra HTML markup intended to target and identify a page element can be totally avoided. Even though these new selectors are not fully recognized or supported by all browsers, it is not a reason not to grasp the awesome targeting power of the CSS3 selectors.

So let’s take a look at how these selectors can be used in keeping your web page fat-free by keeping a lot of unwanted class and ID markups.

Pseudo-Classes and Pseudo-Elements to the Rescue

In all the CSS Selectors available for keeping additional presentational markups to a minimum, the Pseudo-Classes and Pseudo-Elements are the most useful in making targeted selection on elements without adding extra markup or class/id declarations in the HTML source. They can be used to make selections to elements without the need of sprinkling the document with presentational markups and attributes thereby providing better clarity to the source, reducing the maintenance issues and reducing the webpage file size.

Pseudo-Classes and Pseudo-Elements are available right from the first versions of CSS specifications and you will be familiar with them in the form of the old :active, :visited,:hover link Pseudo-Classes.

You can take a look at the Pseudo-Classes and Pseudo-Elements, which are available before the advent of the CSS3 specification in action in the below given Demo.

So what is the difference between a Pseudo-Class and a Pseudo-Element?

Pseudo-classes provides ways to a developer for accessing the dynamic change of state of an element – like getting a run-time focus or mouse hover – or for selecting parts of the content of an element which otherwise will need an ID/Class definition for identifying it – like first child or choosing an element using the lang attribute. This enables the designer in not using extra ID/Class markups.

Pseudo-Elements provides way for the designer to choose specific and unique part of an element – like the first-letter or first-line of an element – and applying styles to it. Pseudo-Elements make this possible without the designer mentioning additional presentational markup like span in isolating the specific part of an element for selection.

From the Demo that we have seen it is evident that the pseudo-classes and pseudo-elements can be used to select elements in a web page with more power. CSS3 equips the web designer with more granular control over targeting specific elements in a page by providing a range of more powerful pseudo-classes.

CSS3 Pseudo-Classes for selecting elements based on their position in the DOM Tree

CSS3 provides a range of new Pseudo-classes for targeting specific elements in a DOM Tree based on their structural position within the web page.

:root – This pseudo-class lets the user choose the top level element of a document.

:empty – targets elements which are empty.

A look at :empty pseudo-class in action

<html>
<head>
<title>The CSS3 :empty Pseudo-Class in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:5px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:none;width:200px;margin-left:200px;border:1px solid #333;padding-left:30px;background-color:#eee;font-family:Courier;font-size:14px;}
li{padding-top:3px;padding-bottom:3px;border:1px solid #eee;}
li:hover{border:1px solid #ddd;background-color:#ccc;}
li:empty{border:1px solid #333;padding:0;margin:0;}
pre span{border:1px dashed red;font-weight:bold;}
</style>
</head>
<body>
<h1>The CSS3 :empty Pseudo-Class in action</h1>
<p>The :empty pseudo-class in action. </p>
<ul>
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Save As</li>
<li></li>
<li>Page Setup</li>
<li>Print</li>
<li></li>
<li>Exit</li>
</ul>
<code><pre>
ul{list-style:none;width:200px;margin-left:200px;border:1px solid #333;padding-left:30px;background-color:#eee;font-family:Courier;font-size:14px;}
li{padding-top:3px;padding-bottom:3px;border:1px solid #eee;}
li:hover{border:1px solid #ddd;background-color:#ccc;}
<span>li:empty{border:1px solid #333;padding:0;margin:0;}</span>
</pre></code>
</body>
</html>

Here empty list elements are used to make the black separators in the menu. Without the power of this pseudo-class, we would have to mark the empty li tags with some class names and then write the appropriate style definition to that. But here the power of :empty is used to target all the empty list items with in the menu using the 

li:empty{border:1px solid #333;padding:0;margin:0;}

statement and for applying the necessary styles.

: only-child – to target an element which is the only child of a parent – i.e and element with no siblings.

<html>
<head>
<title>The CSS3 : only-child Pseudo-Class in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:2px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:disc;width:200px;margin-left:20px;font-family:Courier;font-size:14px;}
li{padding-top:3px;padding-bottom:3px;}
li:only-child{padding-top:1px;color:red;}
li:not(:only-child):not(:last-child):after{content:',';}
pre span{border:1px dashed red;font-weight:bold;}
</style>
</head>
<body>
<h1>The CSS3 : only-child Pseudo-Class in action</h1>
<p>The breakfast menu at our Club offers:</p>
<ul>
<li>Toast</li>
<li>Bacon</li>
<li>Orange Juice</li>
<li>Poached Eggs</li>
<li>Coffee</li>
</ul>
<p>The Lunch menu at our Club offers:</p>
<ul>
<li>Smoked Salmon</li>
<li>Mash</li>
</ul>
<p>The snack menu at our Club offers:</p>
<ul>
<li>Fish n Chips</li>
</ul>
<code><pre>
ul{list-style:disc;width:200px;margin-left:20px;font-family:Courier;font-size:14px;}
li{padding-top:3px;padding-bottom:3px;}
<span>li:only-child{padding-top:1px;color:red;}
li:not(:only-child):not(:last-child):after{content:',';}
</span>
</pre></code>
</body>
</html>

Here we are using a pretty complex looking css statement to unleash a very powerful mixture of pseudo-classes and pseudo-elements.

li:not(:only-child):not(:last-child):after{content:',';}

In this we are finding all the lists with multiple list items using the li:not(:only-child) part of the above statement. Then we are excluding the last list item from each of these using the :not(:last-child) part. Then in such a selection we are adding a content in the form of a comma using the :after pseudo-element. The result is that each list item element in the list – except the last list item of each list and those lists with only one list item in them – are trailed with a comma which is dynamically added to the page.

:last-child – targets the last child of a parent element.

<html>
<head>
<title>The CSS3 :last-child Pseudo-Class in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:2px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:none;width:200px;margin-left:20px;font-family:Courier;font-size:14px;border:5px solid #ccc;padding:20px;}
li{padding-top:3px;padding-bottom:3px;border-bottom:1px dotted #333;}
li:last-child{border:0;}
pre span{border:1px dashed red;font-weight:bold;}
</style>
</head>
<body>
<h1>The CSS3 :last-child Pseudo-Class in action</h1>
<p>The breakfast menu at our Club offers:</p>
<ul>
<li>Toast</li>
<li>Bacon</li>
<li>Orange Juice</li>
<li>Poached Eggs</li>
<li>Coffee</li>
</ul>
<p>The Lunch menu at our Club offers:</p>
<ul>
<li>Smoked Salmon</li>
<li>Mash</li>
</ul>
<code><pre>
ul{list-style:none;width:200px;margin-left:20px;font-family:Courier;font-size:14px;border:5px solid #ccc;padding:20px;}
li{padding-top:3px;padding-bottom:3px;border-bottom:1px dotted #333;}
<span>li:last-child{border:0;}</span>
</pre></code>
</body>
</html>

In this demo each of the last list item in the two lists are picked using the :last-child selector without the use of any class identifier.

:nth-child – targets the nth child element of the selector element .

<html>
<head>
<title>The CSS3 :nth-child Pseudo-Class in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:5px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:none;width:200px;margin:0;padding:0;margin-left:200px;border:1px solid #333;text-indent:20px;background-color:#eee;font-family:Courier;font-size:14px;}
li{padding-top:3px;padding-bottom:3px;border:1px solid #eee;}
li:hover{border:1px solid #ddd;background-color:#ccc;}
li:empty{border:1px solid #333;padding:0;margin:0;}
pre span{border:1px dashed red;font-weight:bold;}
li:nth-child(1){background-image:url('./new.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(2){background-image:url('./open.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(3){background-image:url('./save.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(4){background-image:url('./saveas.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(6){background-image:url('./options.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(7){background-image:url('./print.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(9){background-image:url('./close.gif');background-repeat:no-repeat;background-position:0 2px;}
</style>
</head>
<body>
<h1>The CSS3 :empty Pseudo-Class in action</h1>
<p>The :empty pseudo-class in action. </p>
<ul>
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Save As</li>
<li></li>
<li>Page Setup</li>
<li>Print</li>
<li></li>
<li>Exit</li>
</ul>
<code><pre>
li:nth-child(1){background-image:url('./new.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(2){background-image:url('./open.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(3){background-image:url('./save.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(4){background-image:url('./saveas.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(6){background-image:url('./options.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(7){background-image:url('./print.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(9){background-image:url('./close.gif');background-repeat:no-repeat;background-position:0 2px;}
</style></pre></code>
</body>
</html>

Here the menu that we have built in a previous example is spruced up with unique icons for each of the list items. This example shows the real power of the pseudo-classes in targeting elements without the need of any class or ID identifiers. Without the use of this pseudo-class, we would be left with declaring each element of the list item with a unique class declaration. We are saving a lot of HTML by using this method.

:first-of-type – targets the first element of the same type as the element selector.

HTML

<div>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology.  Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the Mediterranean ports of the West.
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  Asia-in  the  time  of Augustus Caesar,  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.</p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads  past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity. </p>
</div>

CSS 

div p:first-of-type{font-family:Tahoma;font-weight:bold;}

The above code will pick the first paragraph only with in the Div element as we are applying a :first-of-type pseudo-class to the paragraph. Only paragraphs are scanned and the first is selected in this case.

:last-of-type – targets the last element of the same type as the element selector.

HTML

<div>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology.  Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the Mediterranean ports of the West.
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  Asia-in  the  time  of Augustus Caesar,  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.</p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads  past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity. </p>
<p>Excerpt taken from 1000 Places to visit before you Die.</p>
</div>

CSS

div p:last-of-type{font-style:italic;font-size:11px;text-align:right;font-weight:bold;}

:nth-of-type(n) – targets the nth element of the same type as the element selector.

Consider a sample CSS statement like the one given below:

div:nth-of-type(1){border:5px solid #ccc;padding:15px;width:800px;}
div:nth-of-type(2){border:5px solid #000;padding:15px;width:800px;}

The first css statement will pick the first DIV with in the page and will set a #ccc border to it. The second will pick the second DIV with in the page.

:nth-last-of-type(n) – targets the nth element of the same type as the element selector but in reverse order.

Consider a CSS statement

div:nth-last-of-type(1){background-color:red;}

The above css will pick the last div of the page – since the first from the reverse is asked in this statement – and will apply a red background to it.

The below given demo will show you the above given 4 pseudo-class selectors in action.

: only-of-type – targets elements which are unique and of same type as the selector element among its parent element.

:not – This negation selector allows you to exclude certain elements while making the selection.

HTML

<ul>
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Save As</li>
<li></li>
<li>Page Setup</li>
<li>Print</li>
<li></li>
<li>Exit</li>
</ul>

CSS

li:not(:nth-child(7)){font-weight:bold;}

Here we are excluding the 7th list item – item with the Print caption – using the :not pseudo-class and are applying a visual style to all other list items.

:target – This Pseudo-class allows the designer to visually indicate to the visitor the section of a webpage where a link with a fragment identifier – as in the link testpage.htm#section3 – lands the user with. This can be used to visually style the fragment identifier area when such a link is clicked. A demo is included.

<html>
<head>
<title>The CSS3 :target Pseudo-Class in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:5px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:none;width:200px;margin:0;padding:0;margin-left:200px;border:1px solid #333;text-indent:20px;background-color:#eee;font-family:Courier;font-size:25px;}
li{padding-top:3px;padding-bottom:3px;border:1px solid #eee;}
li:hover{border:1px solid #ddd;background-color:#ccc;}
a:link{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
h1:target {color:red;border-bottom:1px dashed red;}
pre span{border:1px dashed red;font-weight:bold;}
div:nth-of-type(1){border:5px solid #ccc;padding:15px;width:800px;}
div:nth-of-type(2){border:5px solid #000;padding:15px;width:800px;}
div:nth-of-type(3){border:5px solid #999;padding:15px;width:800px;}
div p:first-of-type{font-family:Tahoma;font-weight:bold;}
div p:last-of-type{font-style:italic;font-size:11px;text-align:right;font-weight:bold;}
</style>
</head>
<body>
<h1>The CSS3 :target Pseudo-Class in action</h1>
<p>Click the below given in-page links to see :target pseudo-class in action. </p>
<ul>
<li><a href="demo7.html#part1">Part 1</a></li>
<li><a href="demo7.html#part2">Part 2</a></li>
<li><a href="demo7.html#part3">Part 3</a></li>
</ul>
<code><pre>
li:nth-child(1){background-image:url('./new.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(2){background-image:url('./open.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(3){background-image:url('./save.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(4){background-image:url('./saveas.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(6){background-image:url('./options.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(7){background-image:url('./print.gif');background-repeat:no-repeat;background-position:0 2px;}
li:nth-child(9){background-image:url('./close.gif');background-repeat:no-repeat;background-position:0 2px;}
<span>li:not(:nth-child(7)){font-weight:bold;}</span>
</style></pre></code>
<div>
<h1 id="part1">Part 1</h1>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology.  Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the Mediterranean ports of the West.
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  Asia-in  the  time  of Augustus Caesar,  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.</p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads  past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity. </p>
<p>Excerpt taken from 1000 Places to visit before you Die.</p>
</div>
<div>
<h1 id="part2">Part 2</h1>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology.  Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the Mediterranean ports of the West.
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  Asia-in  the  time  of Augustus Caesar,  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.</p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads  past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity. </p>
<p>Excerpt taken from 1000 Places to visit before you Die.</p>
</div>
<div>
<h1 id="part3">Part 3</h1>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology.  Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the Mediterranean ports of the West.
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  Asia-in  the  time  of Augustus Caesar,  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.</p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads  past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity. </p>
<p>Excerpt taken from 1000 Places to visit before you Die.</p>
</div>
</body>
</html>

CSS3 selectors which enable the users to make selections based on Tag Attributes

The [attr] selector in the previous versions of CSS specifications allowed us to make targeted selections on elements having specific attributes and attribute values. CSS3 makes this selector more powerful by providing three substring tools which can be used to make precise matching while providing the attribute value.

[attr^=”valuestring”] – this will find all elements with that specific attribute whose values stars with ’valuestring’.

[attr$=”valuestring”] – this will find all elements with that specific attribute whose values end with ’valuestring’.

[attr*=”valuestring”] – this will find all elements with that specific attribute whose values contains ’valuestring’ with in it.

<html>
<head>
<title>The CSS3 attribute selectors in action</title>
<style>
h1{font-family:verdana;font-size:20px;padding:10px;color:#334455;}
p{font-family:Verdana;font-size:15px;padding:10px;width:750px;text-align:justify;color:#999999;padding-top:5px;padding-bottom:5px;}
pre{background-color:gold;padding:3px;margin-right:30px;}
ul{list-style:none;width:200px;margin:0;padding:0;margin-left:200px;border:1px solid #333;text-indent:20px;background-color:#eee;font-family:Courier;font-size:25px;}
li{padding-top:3px;padding-bottom:3px;border:1px solid #eee;}
li:hover{border:1px solid #ddd;background-color:#ccc;}
a:link{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
pre span{border:1px dashed red;font-weight:bold;}
div:nth-of-type(1){border:5px solid #ccc;padding:15px;width:800px;}
div p:first-of-type{font-family:Tahoma;font-weight:bold;}
div p:last-of-type{font-style:italic;font-size:11px;text-align:right;font-weight:bold;}
a[target="_blank"]{border-bottom:2px double green;}
a[href^="http://"]{background-image:url(./out.gif);background-repeat:no-repeat;background-position:right center;padding-right:10px;}
a[href*="hbird"]{background-image:url(./hb.gif);background-repeat:no-repeat;background-position:right center;padding-right:13px;}
</style>
</head>
<body>
<h1>The CSS3 attribute selectors in action</h1>

<code><pre>
a[target="_blank"]{border-bottom:2px double green;}
a[href^="http://"]{background-image:url(./out.gif);background-repeat:no-repeat;background-position:right center;padding-right:10px;}
a[href*="hbird"]{background-image:url(./hb.gif);background-repeat:no-repeat;background-position:right center;padding-right:13px;}
</pre></code>
<div>
<p>In the below given paragraph the green underlined links are links which will open in new window. We are using the [target="_blank"] selector on link tags to make 

this selective styling. Then we are identifying all external links by using the [attr^='valuestring'] selector to pick all links that starts with "http://" and are 

applying a small icon to them.</p>
<p>
One  of  the best-preserved  ancient  cities on  the Mediterranean)  Ephesus  is Turkey's  showpiece  of Aegean  archaeology. This is <a href="#" target="_blank">link 

1 with a blank target</a> Although it  is 3 miles away
from  the sea  today,  Ephesus  was  once  one  of the wealthiest  trading port cities of the Greco-Roman era, ideally  situated between the Near East and  the 

Mediterranean ports of the West.This is <a href="#" target="_blank">link 2 with a blank target</a>
</p><p>Settled as early  as l00O  B.C.by  the  Ionians,  its  extensive  and  impressive ruins testify to its ancient role as capital of the Roman  province  of  

Asia-in  the  time  of Augustus Caesar, - An <a href="http://www.google.com"> external link</a> -  it was  the second-largest  city
in  the eastern Mediterranean,  after Alexandria.This is <a href="#">link 3 with out any target</a></p>
<p>Today,  a mile-long marble-paved street grooved
by  chariot  wheels  leads - This is <a href="http://www.google.com">another external link</a> - past  partially  recon-
structed buildings,  such as the Great Theater
(which held  25,000  spectators) and the beauti-
ful  two-story  Celsus  Library @uilt in A.D.  135),
one of  the  largest  libraries  and  most graceful
surviving  buildings  of antiquity.This is <a href="http://www.hbirdsolutions.com">an external link, but to our own website</a> </p>
<p>Excerpt taken from 1000 Places to visit before you Die.</p>
</div>

</body>
</html>

In the above given example code all the links which are set to open in new window are identified using the [target="_blank"] selector and we are applying a selective styling of green bottom border to them. By using the a[href^="http://"] selector we are identifying all external links by using the and are applying a small icon to them. Then we are using the in between string finder facility offered by the [attr*=’valuesstring’] selector for picking up links pointing to our own website. The a[href*="hbird"] selector finds all links with an ‘hbird’ text with in the href attribute and we are doing another selective styling to those links.

Conclusion

We have taken a quick look at the new and powerful selectors offered by CSS3 for making quick, efficient and linear target selections. All the selectors help in making the HTML source clean, fat-free and easy to maintain by avoiding the need for unwanted presentational HTML markups and class/ID attributes. Having a good understanding of these selectors can save a lot of trouble for a web coder.

This entry was posted on Tuesday, June 7th, 2011 at 11:24 am and is filed under Web Developer Classroom. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Rate this post:
Loading ... Loading ...
HB Admin's Gravatar icon

Author: HB Admin

Admin of Humming Bird Designs Blog

98 articles posted by HB Admin.

Like it? Share it!
[Facebook] [Google] [LinkedIn] [Technorati] [Twitter] More »

Related Posts

  1. From The Mad Lab – A CSS3 & jQuery based Sliding Door Content Gallery
  2. From The Mad Lab – A CSS3 & jQuery based Japanese Paper Fan Image Gallery
  3. From the Mad Lab – Building a Gallery of Content using Pure CSS
  4. From The Mad Lab – Having Fun by making a pure css image gallery
  5. How to make your website flexible across a range of target devices – A Simple Introduction to CSS3 Media Queries
SUBSCRIBE
Enjoyed this post? Subscribe to HB BLOG.

COMMENTS (3)

Achey Dosth
Page:

ADD A COMMENT

Name (required)

Email (required)

Website

Reload Image

Comments