CSS3 Selectors Tutorial
In this tutorial we will look at a set of new selectors included in CSS3. These new selectors allow designers to control the look and feel of the user interaction features of a webpage. Until now much of this work had to done using scripts like JavaScript to dynamically change the default dowser setting. These new selectors make is possible to control what the user experiences using just style sheets.
Selection
First we will look at a selector that can be used to style what users select and highlight on a page. This is the ::selection selector. The ::selection selector can only be used with outline, cursor, background and color properties. All the latest versions of the browsers include this selector. However you have to use the –moz-prefix for the Firefox browser.
Let us look at an example. When users highlight text on a webpage, the browser will use its default highlight color. Suppose you want to create a custom look for the text and the background color when the user selects something, you can do that using the ::selection pseudo-class. In this example we will set background color to black and the highlighted text to hot pink. Here is the CSS.
<style>
::selection
{
color:#FF6EB4;
background-color:black;
}
::-moz-selection
{
color:#FF6EB4;
background-color:black;
}
</style>
As you can see, we had to include an additional selector with the –moz- prefix for the Firefox browser. Here is what this looks like in the browser when a user selects something.
Target
The next selector we will look at is the :target peudo-class. This selector applies a style to the target of an internal link in the document. It is possible use the <a> tag to create links to different parts of the document. To do this you include # reference like <a href= "#cite">. The target of this link is the element in the document with the id or name “cite.” The :target selector allows you to apply a specific style to the target element when the link is activated.
Here is an example. We will use the same sonnet as in the earlier example. This time we will include two links to specific lines in the sonnet. We will then use the :target selector to apply a specific style to the target line. In this example we will set the background color of the target to gray and the text color to red. Here is the style and html.
<html>
<head>
<style type="text/css" >
:target
{
color:red;
background:#f0f0f0;
}
</style>
</head>
<body>
<p>Click to find the line in the sonnet.</p>
<p> <a href= "#ref1"> Love and Tempest</a></p>
<p> <a href= "#ref2"> Love and Time.</a></p>
<p>Let me not to the marriage of true minds<br/>
Admit impediments. Love is not love<br/>
Which alters when it alteration finds,<br/>
Or bends with the remover to remove:<br/>
O no! it is an ever-fixed mark <br/>
<span id= "ref1">That looks on tempests and is never shaken;</span><br/>
It is the star to every wandering bark,<br/>
Whose worth’s unknown, although his height be taken.<br/>
<span id= "ref2">Love’s not Time’s fool, though rosy lips and cheeks </span><br/>
Within his bending sickle’s compass come: <br/>
Love alters not with his brief hours and weeks, <br/>
But bears it out even to the edge of doom.<br/>
If this be error and upon me proved,<br/>
I never writ, nor no man ever loved. </p>
</body>
</html>
The images below show what happens when you click on the links.
Enabled, Disabled and Checked
The final group of new selectors we will look are the pseudo classes :enabled, :disabled, and :checked. These selectors are meant to be used with form elements like <input>. The :enabled selector matches all form elements that are enabled or not explicitly disabled. The :disabled selector matches all form elements that have their attribute value set to disabled. The :checked selector applies to the checkbox and the radio button input types. This selector matches elements the user has checked. To see these selectors in action, let us look at an example.
You can use these selectors to give your users visual cues for filling out a form. We will create a simple form with inputs for First and Last names, age, radio buttons and a list with checkboxes. We will use the selectors to give specific styles for inputs that are enabled and those that are disabled. The radio buttons and checkboxes will also be specifically styled.
Here is the html and style sheet.
<html>
<head>
<style type="text/css">
input
{
margin: 5px;
}
input:enabled
{
border:2px solid red;
}
input[type="radio"]:enabled
{
border:none;
background-color:white;
}
input:disabled
{
border:2px solid black;
background:#f0f0f0;
}
input:checked
{
border-color:white;
background-color:white;
color:red;
}
ul
{
list-style:none;
}
</style>
</head>
<body>
<form>
First Name:<input type= "text" value= "Enabled"/><br/>
Last Name:<input type= "text" value= "Enabled"/><br/>
Age:<input type= "text" value= "Disabled" disabled= "disabled"/>
<p>Do you have any food allergies?</p>
Yes <input type= "radio"/>
No<input type= "radio"/>
<br/>
<p>Please select the foods you are allergic to.</p>
<ul>
<li>Peanuts <input type= "checkbox"/><li>
<li>Eggs <input type= "checkbox"/><li>
<li>Grapes <input type= "checkbox" disabled= "disabled"/><li>
<li>Gluten <input type= "checkbox"/><li>
</ul>
</form>
</body>
</html>
Here is what it looks like in the browser when it is loaded.
Now, let us input a name and make some selections. Here is what it looks like in the browser after the changes.
You can see how the form elements changed according to the styles we used.