Element, Class and Id Selectors

CSS selectors are patterns that give us precise control over the selection of elements that will be styled.

Element Selectors

We can set the style of any HTML element. For example, we could declare the <h1> style as shown below:

h1
{
color : red;
font-size : 1.5em;
}

The <h1> element style declared above will automatically be applied to all <h1> elements. Element styles can add or modify existing element sytles, as per the example above.

Element styles are useful if we want all instances of a particular HTML element to act the same. In the above example, we want to change all instances of <h1> in a document.

 

The complete set of element selectors is shown below:

 

*
*
{
   /* Selects all elements */
}
element
p
{
   /* Selects all <p> elements */
}
element, element
div, p
{
   /* Selects all <div> elements and all <p> elements */
}
element element
div p
{
   /* Selects all <p> elements that are children of a <div> element */
}
element > element (Immediate child selector)
div > p
{
   /* Select all <p> elements that are immediate children of a <div> element */
}


Example of an immediate child selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Selector Example</title>
<style>
div > p
{
   background-color:red;
}
</style>
</head>

<body>
<div>
<p>A 'P' inside a 'DIV'</p>
<p>A second 'P' inside a 'DIV'</p>
<form>
<p>A 'P' inside a 'FORM' that is inside a 'DIV'. This 'P' is NOT an immediate child of the 'DIV'</p>
</form>
</div>
<p>A 'P' outside a 'DIV'</p>
</body>
</html>
element + element (Adjacent and following Selector)
div + p
{
   /* Select all <p> elements that are placed immediately after a <div> element */
   /* NOTE: Although called adjacent, the above only refers to <p> elements that */
   /* come after, not in front of, a <div> element. */
}


Example of an adjacent (and following) selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent Selector Example</title>
<style>
div + p
{
   background-color:red;
}
</style>
</head>

<body>
<p>A 'P' that is adjacent to and in front of a 'DIV'</p>
<div><p>A 'P' inside a 'DIV'</p>
</div>
<p>A 'P' that is adjacent to and following a 'DIV'</p>
<p>A 'P' that is not adjacent to a 'DIV'</p>
</body>
</html>
element ~ element (Sibling Selector)
div ~ p
{
   /* Selects all <p> elements that are siblings of a <div> element */
   /* NOTE: Although called adjacent, the above only refers to <p> elements that */
   /* come after, not in front of, a <div> element. */
}


Example of a sibling (and following) selector (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent Selector Example</title>
<style>
div ~ p
{
   background-color:red;
}
</style>
</head>

<body>
<p>A 'P' that is adjacent to and in front of a 'DIV'</p>
<div><p>A 'P' inside a 'DIV'</p>
</div>
<p>A 'P' that is adjacent to and following a 'DIV'</p>
<p>A 'P' that is not adjacent to, but follows a 'DIV'</p>
</body>
</html>

Class Selectors

In addition to associating styles to particular HTML elements, we can create additional style classes. They are declared in exactly the same way as above. For example, we could declare a style as shown below:

.highlight
{
font-weight : bold;
font-style : italic;
}

Note: The "." must appear before the class name in the class definition (e.g. ".highlight). To attach this style to a particular instance of (for example) a <h1> tag, use the code below:

<h1 class = "highlight">

To attach the same style to a particular instance of a <p> tag, use the code below:

<p class = "highlight">

Style classes are useful if we want two or more HTML elements to act the same. In the above example, we want to force highlighted text at particular instances of <h1> and <p> in a document.

Google fonts use css classes to allow you to add effects to your fonts, as described at https://developers.google.com/fonts/docs/getting_started#Effects. Write code to add a neon effect to the text in a webpage, as shown here.

ID Selectors

The # selector is used to specify a style for a single HTML element.

For example, we could declare a header style as shown below:

#mainParagraph
{
font-weight : bold;
font-style : italic;
}

Note: The "#" must appear before the ID name in the ID definition (e.g. "#mainParagraph"). This style will automatically be attached to the single HTML element with the id "mainParagraph". use the code below:

<p id = "mainParagraph">

As no other HTML element should have the same id, the ID style will only operate on the single HTML element

Style IDs are useful if we want one instances of a particular tag to act in a unique way. In the above example, we only want to force highlighted text at a particular <p> in a document.

Making Class and ID Selectors Unique

In real-world projects, where you will be importing css files from other sources, it is important to ensure that your own classes and IDs are unique. This is normally done by inserting a unique company identifier in front of your own classes and IDs. This is shown below.

Note: So as to keep these notes as simple as possible, we shall not insert a unique identifier in any of our examples.

.dor_highlight
{
   ...
}

#dor_mainParagraph
{
   ...
}



<h1 class = "dor_highlight">
<p id = "dor_mainParagraph">

Multiple Selectors

A single style can be applied to one or more elements, classes or IDs.

For example, we could declare a style as shown below:

p,
.highlight,
#someUniqueElement
{
color : red;
font-style : italic;
}

This would apply the same style to all paragraphs, to all elements of class "highlight" and to the unique element called 'someUniqueElement".

 
 
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>