CSS selectors

Not all of these CSS selectors work in all browsers.

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.

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;
}

Categories

Tags

No tags

Social