Tag Archives: selector

CSS nth-child selector

In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.

In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.

#mydiv p:nth-child(5){
 color:red;
}

Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:

#mydiv p:nth-child(odd){
 background-color:green;
}

Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.

Here is the HTML sample code:

<!DOCTYPE html>
<html>
<head>
 <title>CSS nth-child() selector</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/>
</head>
<body>
 <div id="mydiv">
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 </div>
</body>
</html>

And here is the CSS code showing just the ‘even’ selection example from the video:

#mydiv p:nth-child(even){
 background-color:black;
 color:white;
}

Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.

Child selectors

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.

For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.

The parent/child relationship in CSS.
The parent/child relationship in CSS.

The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.

Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Child selectors</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/>
</head>
<body>
<div>
 <p>This paragraph has a parent div.</p>
</div>
<p>This paragraph does not have a div as a parent.</p>
<div id="myparagraph">
 <p>This paragraph is a child of another div.</p>
</div>
<p>This is another paragraph without a parent div.</p>
</body>
</html>

And here’s the CSS code:

p{
 color:blue;
}
 
div p{
 color:red;
}
 
#myparagraph p{
 color:green;
}

ID Selector

In the previous tutorial, we looked at a few different types of CSS Selectors and we used the class selector to apply a style to all elements that used that class name. In this tutorial, we will look at the ID selector.

The ID selector is used when we want to apply a style to a single element. An ID is unique for each element. We can use a class for multiple elements but we should only ever use an ID for a single element. If we use the same ID for multiple elements, problems will start to occur especially when using JavaScript code.

An HTML element can be given an ID like in the example HTML code below:

<p id="blue">This text is blue</p>

The ID style is specified in the CSS code and a hashtag (#) is placed before the ID name.

#blue{
       color:blue;
}

Watch the video below to see how you can use IDs in your HTML and CSS. Then scroll down to see the sample code.

Here is the sample HTML code (it references a CSS file called stylesheet6.css in the resources directory):

<!DOCTYPE html>
<html>
<head>
 <title>IDs</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet6.css" type="text/css"/>
</head>
 
<body>
 <p id="blue">This is a blue paragraph</p>
 <p id="green">This is a green paragraph</p>
 <p id="red">This is a red paragraph</p>
</body>
 
</html>

And here is the sample CSS code:

#blue{
 color:blue;
}
 
#green{
 color:green;
}
 
#red{
 color:red;
}

We will be looking at more selectors in upcoming tutorials. Happy coding!

Class Selector

Selectors are used to select elements in a  web page that you want to style. There are many types of CSS selectors including:

  • Element selector – element selectors select all of the elements in a web page with the specified element name (eg. p, h1, h2).
  • Class selector – class selectors apply a style to all of the elements that use that class. Eg. a style of green text with a yellow background could be applied to multiple paragraphs that use that class name.
  • ID selector – ID selectors are unique for each element and are used when you want to apply a style to just one element on a web page.
  • and many more.

If you have completed the previous tutorials, then you have already used element selectors. In this tutorial we will focus on using the class selector. A class selector can be used when you want to apply a style to all of the elements that use that class name.

When we uses classes, we specify the class name in the element tag. In the example below, a paragraph is using the ‘blue’ class:

<p class = "blue">This text is blue</p>

Then, in the CSS code you need to define the class by placing a period/full stop before the class name. A period means that this will be a class:

.blue{
       color:blue;
}

Watch the video below to see how you can use classes in your web pages. Then scroll down to view the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet5.css" type="text/css"/>
</head>
 
<body>
 <p class="red">This paragraph will be red</p>
 <p class="green">This paragraph will be green</p>
 <p class="blue">This paragraph will be blue</p>
</body>
 
</html>

And here is the sample CSS code (in a seperate style sheet called stylesheet5.css in the resources directory:

.red{
 color:red;
}
 
.green{
 color:green;
}
 
.blue{
 color:blue;
}

In the next tutorial, we will take a look at the ID selector.