HTML for Kids · Lesson

Selector Types

Selector Types is a free HTML for Kids lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Introduction

Hello,

In this lesson, we will further improve our CSS knowledge with more complex selectors.

Multiple style definition

We can make multiple style definitions by putting semicolons between each style.

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

there is an HTML document that gets more complex.

So far, we have worked with a simple tag, id, and class selectors. But in some cases, when the user interface gets complex, we will need to use more complex selectors.

In the example below, there is an HTML document that gets more complex.

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

analyze example

Let's analyze our code now.

There is a div with the my-area id that acts as a container inside the page body. It is the ancestor of all the elements under this div.
The p element with the first class is the sibling of the div element with the second class.
The third element is the child of the second element and the my-area element can be regarded as the ancestor of the third element.

Warning

You can think of HTML layout as a literal family tree.

You can inherit genetically from your grandfather.

But if this inheritance changes on your father, the gene of the father will be more dominant, and the trait from your grandfather will change.

Selector Combinations

Now let's see how to make combinations in selectors.

The following statement states that the element with the second class is the descendant (child or grandchild) and the element with the third class.

If there is a space between the two classes, it means that the class on the left is looking for a descendant.

.second .third{
	color:red;
}

Child Selector

In the example below,

It means choose the third class, which is the child of the second class.

Greater than sign means select the child of the relevant element.

.second > .third{
	color:red;
}

we can combine tag and class selector to select an element.

At the same time, we can combine tag and class selector to select an element.

The example below will select p elements with the third class.

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

Suppose we want to choose a div with first class.

Suppose we want to choose a div with first class.

In the example below, it means to select the element with the first class, which is the child of the div element with my-area id.

This increases the specificity of the element to be selected.


div#my-area > .first{
color:red;
}

Selecting all

The asterisk sign (*) is important among selectors.

And it means selecting all.

In the example below, the selector implies that the element with the my-area id should select all descendants.

The point we need to be aware of here is that it is not only children but all descendants.

If we wanted to choose only children, we would have to put the greater than sign before the asterisk.

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

12

We used descendant selector and child selector, now let's learn about sibling selector.

The sibling selector uses the + sign to select the next sibling.

In our example, the 3rd paragraph element's background color will be colored yellow by the selector.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

13

If we want to select not only the next first sibling but all the siblings that follow, we use the tilde sign (~).

The tilde symbol is already known as Subsequent-sibling Combinator.

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

15 Pseudo-classes and CSS Classes

Expressions that are not a class but behave like a class are called pseudo-classes.

We do not define Pseudo-classes to any element in HTML.

When the browser interprets the code, it assumes that they exist. Therefore, we can use pseudo-classes in CSS selectors.

16

Among the pseudo-classes, :hover is undoubtedly the best known.

Hover (:hover) is a pseudo-class that is automatically defined to the browser's relevant element when the mouse hovers over the element.

Pseudo-classes are used after the colon (:) symbol in the selector statement.

The syntax for using pseudo-class is exemplified below.

selector:pseudo-class {
   property: value;
}

18

Now let's create a link and see what it will look like when you hover over it.

Warning: Since there is no hover event like Web on mobile devices, this effect will not be seen in Coddykit mobile applications.

In the example below, let's observe that when we hover the link with the mouse, the color of the link will turn green.

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

:first-child pseudo-class

One of the most confusing pseudo-classes is :first-child.

Usually, when we look at the name, we can infer the meaning of pick the first child of an element.

Actually, this inference is not correct.

It is used to select the first element among the element's siblings.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

21 :last-child pseudo-class

last-child is the opposite of the first-child pseudo-class. It is used to select the last element among the element's siblings.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

23 ::before pseudo-element

If we want to add something before an element, the ::before pseudo selector is used.

In the example below, we added 'Hello' content before header elements.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

24 ::after pseudo-element

The :: after pseudo-element, which is the opposite of the :: before pseudo-element, is used to add new content after the element.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

List Pseudo Class

We learned the most used pseudo-classes. However, there are dozens more.

You can reach the list of all pseudo-classes from the link below. You can use any of them whenever you need them.

Congratulations

Congratulations 🎉

In this section, we learned the Selector Types.

In the next section, we will learn the most used CSS properties

Frequently asked questions

Is the “Selector Types” lesson free?

Yes — the full text of “Selector Types” is free to read here on the web, and the HTML for Kids course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Selector Types”?

Selector Types You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.

How long does the “Selector Types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

← Back to HTML for Kids