CSS selectors
Universal selector – *
This selector apples the style to any element.
<head>
<style type="text/css">
<!--
*
{
width: 250px;
}
-->
</style>
…
The above example will make the width of every component 250px in width. This selector does not need to be used in the following circumstances.
- Class selectors .myStyle is equivalent to *.myStyle as they apply to every element with the class attribute ‘myStyle’
- ID selectors #myID is equivalent to *#myID as they both apply to the element with the ID ‘myID’
- Attribute selectors [href="#"] is equivalent to *[href="#"] as they both apply to elements that have a href attribute set to ‘#’
- Descendant selectors ‘div span’ is equivalent to ‘div * span’ as the both apply to span elements that are nested inside div elements
Type selectors
Single selectors – div
Type selectors allow styles to be applied to specific elements.
div
{
font-weight: bold;
}
This examples makes all the text within the div
tag bold.
Descendent selectors – div span
This selector allows you to specify styles to apply to nested elements. The following example will apply the style only to span
elements within paragraph elements.
p span
{
font-weight: bold;
}
Child selectors – body > div
Child selectors allow you to specify elements that are ‘children’ of others.
div > span
{
font-weight: bold;
}
Adjacent sibling selector – p + em
This selector specifies that if one element is directly followed by another then apply the style. The example below applies the style only if the p
element immediately precedes a H1
element.
h1 + p
{
font-weight: bold;
}
Below is the HTML that will make the text in the paragraph bold.
<h1>Title</h1>
<p>Bold</p>
First child pseudo selector – :first-child
This pseudo selector allows you to apply an element to the first child in a nested layout.
div:first-child
{
color: #0000FF;
}
The text colour of the first element within any div
tag will be changed using this example.
Language pseudo selector – :lang(en)
The language pseudo selector allows you to change styles based on the attributed language of the element.
:lang(en)
{
font-size:12px;
}
This example changes the style of all elements that have the language specified as “en”. A hyphen separated list of languages can also be given.
h1:lang(en-fr)
{
font-size:16px;
}
ID selectors – #myID
The ID selector applies the style to the element in the page with the corresponding ID attribute.
#leftColumn
{
width: 250px;
}
This example changes the width of the element with the ID ‘leftColumn’.
Class selector
Universal class selector – .myStyle
This selector applies to any element that has the class attribute specified. The following example makes any element with the class attribute ‘boldText’ have bold text.
.boldText
{
font-weight: bold;
}
Element class selector – h1.myStyle
The class selector can be applied to elements so that any element of a certain type that has the appropriate class attribute can have certain styles applied.
p.boldText
{
font-weight: bold;
}
This style now only applies to the paragraph element with the class attribute ‘boldText’.
Multiple class selector – .style1.style2.style3
HTML elements can have multiple names within the class attribute. For example the following H1
element has 3 styles applied.
<body>
<h1>title</h1>
…
<head>
<style type="text/css">
<!--
.blue
{
color: #0000FF;
}
.bold
{
font-weight: bold;
}
.underline
{
text-decoration: underline;
}
-->
</style>
…
The code above can be simplified to:
.blue.bold.underline
{
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}
This can also be applied to specific elements.
h1.blue.bold.underline
{
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}
Attribute selectors
Unspecified value – a[title]
This selector can be used to change the style of an element that has a certain attribute, regardless of its value.
a[onclick]
{
color: #0000FF;
}
This examples adds the style to all a elements that have an ‘onclick’ attribute.
Exact match - a[href=#]
This allows you to select elements based on exact attributes values. The following example applies the style to all checkboxes.
input[type=checkbox]
{
outline: solid medium #3300CC;
}
Attribute matching – a[href~=# pixelcode.co.uk]
Using this selector multiple (space separated) values can be searched. The example applies the style to radio buttons and checkboxes.
input[type~=checkbox radio]
{
outline: dashed thin #33FFFF;
}
Start matching – p[lang|="en"]
This selector allows you to select attributes that are hyphen separated list of words starting with that selected. The example below with match “en” and “en-US” and any other language that starts with “en”.
[lang|="en"]
{
color: #0000FF;
}