Selectors

In this section we are going to look at the class and id selectors, along with how they can be grouped. We will also take a brief look at the combinator selectors.


Class Selector

A class selector can identify more than one elements and is defined by the dot '.'.


Example


<head>

<style>
.p1
{
color:green;
}
.p2
{
color:red;
text-align:center;
}
</style>

</head>

</body>
<p class="p1">
This paragraph class selector is "p1".
</p>

<p class="p2">
This paragraph class selector is "p2".
</p>

<h2 class="p2">
This header 2 class selector is "p2".
</h2>

<p>
This paragraph has no class selector.
</p>
</body>



Displays

This paragraph class selector is "p1".

This paragraph class selector is "p2".

This header 2 class selector is "p2".

This paragraph has no class selector.





Id Selector

An Id selector is used to identify one unique element and is defined by the hash'#'.


Example 1

<head>
<style>
#p1
{
color:blue;
}

#p2
{
color:red;
}
</style>
</head>
<body>

<p>Paragraph has no id selector.</p>
<p id="p1"> Paragraph id selector is "p1"</p>
<p id="p2"> Paragraph id selector is "p2"</p>
</body>

Displays

Paragraph has no id selector.

Paragraph id selector is "p1"

Paragraph id selector is "p2"




Example 2


<head>
<style>

#col1
{
background-color:pink;
}

#col2
{
background-color:black;
color:white; }

</style>
</head>
<body>
<h3 id="col1">
This h3 id selector is "col1"
</h3>

<h3 id="col2">
This h3 id selector is "col2"
</h3>
</body>

Displays

This h3 id selector is "col1".

This h3 id selector is "col2".




Example 3


<head>
<style>

#f1
{
font-size:12px;
}

#f2
{
font-size:16px;
}

#f3
{
font-size:20px;
}

</style>
</head>
<body>
<p id="f1"> This paragraph id selector is "f1".</p>

<p id="f2">This paragraph id selector is "f2".</p>

<p id="f3">This paragraph id selector is "f3".</p>
</body>

Displays

This paragraph id selector is "f1".

This paragraph id selector is "f2".

this paragraph id selector is "f3".






Grouping Selectors

Several selectors can be grouped to apply the same style; a comma separates the selectors.


Example 1


<head>
<style>

p, h3
{
color:blue;
}
</style>
</head>
<body>
<p > This paragraph colour is blue.</p>
<h3>This h3 colour is blue.</h3>
</body>

Displays

This paragraph colour is blue.

This header3 colour is blue.




Example 2


<head>
<style>

li, .colr
{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<ul>
<li>This bullet point colour is red and bold.</li>
</ul>
<p class="colr">This paragraph colour is red and bold.</p>
<p>This paragraph has no style.</p>
</body>


Displays

  • This bullet point colour is red and bold.

This paragraph colour is red and bold.

This paragraph has no style.






Combinator Selectors

The four combinator selectors are:

Descendant Selector

To help you understand the descendant selector look at the example below. The unordered list element is the descendant of the div element, which means the unordered list element inside the div tag will be in red.


Example

<head>
<style>

div ul
{
color:red;
}

</style>
</head>
<body>
<div>
<ul>
<li>books</li>
<li>pencils</li>
<ul>

<h3>
<ul>
<li>apples</li>
<li>pears</li>
</ul>
</h3>
</div>

<ul>
<li>books</li>
<li>pencils</li>
</ul>
</body>

Displays

  • books
  • pencils

  • apples
  • pears


  • books
  • pencils





Child Selector

The greater sign is used to create the child selector. To help you understand the child selector look at the example below. The unordered list element has to be the direct child of the div element for the bullet points, inside the div tag, to be blue.

Note! The unordered lists inside the <h3></h3> tags is not blue because it is not the direct child of the div element.


Example


<head>
<style>

div > ul
{ color:blue;
}

</style>
</head>
<body>
<div>
<ul>
<li>cakes</li>
<li>biscuits</li>
</ul>

<h3>
<ul>
<li>apples</li>
<li>pears</li>
</ul>
</h3>
</div>
</body>

Displays

  • cakes
  • biscuits

  • apples
  • pears






Adjacent Sibling Selector

The plus sign is used for the adjacent sibling selector. To help you understand the adjacent sibling selector look at the example below. The paragraph element is a direct adjacent sibling to the h3 element, which means the first paragraph element after the h3 element is styled.


Example


<head>
<style>

h3 + p
{
color:blue;
font-style:italic;
font-size:20px;
}

</style>
</head>
<body>

<h3>Heading</h3>
<p>I like CSS. </p>
<p>I like HTML. </p>

<h3>Heading</h3>
<p>I speak French.</p>
<p>I speak Hindi </p>


</body>

Displays

Heading

I like CSS

I like HTML

Heading

I speak French

I speak Hindi




General Sibling Selector

The squiggly sign is used for the general sibling selector. To help you understand the general sibling selector look at the example below. All the paragraph elements after the h4 elements are styled.


Example


<head>
<style>

h4 ~ p
{
color:red;
font-weight:bold;
}

</style>
</head>
<body>

<h4>Heading</h4>
<p>I like CSS. </p>
<p>I like HTML. </p>

<h4>Heading</h4>
<p>I speak French.</p>
<p>I speak Hindi </p>


</body>

Displays

Heading

I like CSS

I like HTML

Heading

I speak French

I speak Hindi





Attribute Selector

In HTML you learnt about attributes, so in this section we are going to style them.

Example


<head>
<style>
input[type="text"]
{
background-color:black;
color:white; font-weight:bold
}
</style>
</head>

<body>
<h2>
Name:<input type="text"/>
</h2>
</body>

Displays

Name:





Now do the Exercise!