CSS Selector 22/06/2021
A selector is a pattern that is used to select an element to apply the CSS
style rules.
Selectors can be used as a condition or a CSS rule to determine the
elements that match with the selector. As the CSS rule is divided into the
following two parts.
• selectors
• declaration
The declaration is a part that appears within the braces of the CSS rule
followed by the selector. The rules defined in the declaration part are
applied to the elements specified by the selector. The different types of
selectors are as follows.
• The universal selector
• The type selector
• The class selector
• The id selector
• The child selector
• The descendant selector
• The adjacent sibling selector
• The attribute selector
• The query selector
CSS Universal Selector
The universal selector selects all the elements that are present in
an HTML document.
You can use this selector to apply the same rule to all the elements of an
HTML or XHTML document. The universal selector is represented by an
asterisk symbol, as shown in the following code snippet.
*{}
The following code fragment shows the use of universal selector.
*
{
margin:0;
padding:0;
}
In the above code fragment, the margin and the padding properties are set
to 0 for all the elements in the HTML or XHTML document on which the
CSS rule is applied.
Example
example uses the CSS universal selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Universal Selectors Example</title>
<style>
*
{
Font-family:Broadway;font-size:20;color:
green;}
</style>
</head>
<body>
<h2>Good Morning All Students</h2>
<hr size=”10” color=”blue”>
<p>We are learning CSS Universal Selector.</p>
<hr size=”10” color=”blue”>
<h2>Pace Computer Education</h2>
<p>Covid Vaccination is important for all</p>
</body>
</html>
Here is the sample output produced by the above CSS universal selector
example code:
CSS Type Selector
The type selector matches all the elements specified in a list with the given
value to determine the elements to which the CSS rules are to be applied.
The rules applied to several elements of an HTML or XHTML document are
similar to the ones applied to a CSS file.
The following code fragment shows how to use the type selector in CSS.
h1, h2, h3, p { font-family: sans-serif }
In the above code fragment, we have specified the font-family property for
the different heading elements (h1, h2, h3) and for the paragraph element
(p).
Example
Let's look at the following example. This example demonstrates CSS type
selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
H2 {Font-family:Broadway;font-size:20;color:
green;}
</style>
</head>
<body>
<h2>CSS Type Selector</h2>
<hr/>
<p>This is Program on CSS type selector.</p>
<hr/>
<h2>CSS Type Selector Example</h2>
<p>This is example on CSS type selector.</p>
</body>
</html>
Output of the above program
CSS Class Selector
The class selector allows you to apply CSS rules to the elements that carry
a class attribute whose value matches with the class attribute specified in
the class selector.
Let's consider that you have an element, H1, with a class attribute whose
values is intro, as shown in the following code fragment.
<H1 class="abc1">Header 1</H1>
You can use a class selector in either of the two ways.
(i) By applying the CSS rule to all the elements that have the class attribute
of the same value. The following code fragment shows how to apply the
CSS rule.
.abc1 { font-family: sans-serif}
In the above code fragment, a period is followed by a value. The value is
followed by braces which embeds the CSS rule within it. The CSS rule is
applied to all the elements having the class attribute with intro as its value.
(ii) By applying the CSS rule to the H1 elements, whose class attribute
contains intro as its value. The following code fragment shows how to apply
the CSS style on H1 elements.
h1.abc1 { font-family: sans-serif}
In the above code fragment, an element name is followed by a value. The
value is followed by braces, which embeds the CSS rule within it. The CSS
rule is applied to all the H1 elements having the class attribute with intro as
its value.
Example
Let's look at the following example. This example illustrates the CSS class
selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
.green
{
color: green;
}
</style>
</head>
<body>
<h2 class="green">CSS Class Selector Tutorial</h2>
<hr/>
<p>This is tutorial on CSS class selector.</p>
<hr/>
<h2>CSS Class Selector Example</h2>
<p>This is example on CSS class selector.</p>
</body>
</html>
Output of the above Program
As you can see from the above example, only the first heading is applied to
display in red colored using the class selector.
Here is another example also demonstrates the CSS class selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
h2.green
{
color: green;
}
p.red
{
color: red;
}
</style>
</head>
<body>
<h2 class="green">CSS Class Selector Tutorial</h2>
<hr/>
<p class="green">This is tutorial on CSS class
selector.</p>
<hr/>
<h2 class="red">CSS Class Selector Example</h2>
<p class="red">This is example on CSS class
selector.</p>
</body>
</html>
Now, the above CSS class selector example code will produce the
following output:
CSS ID Selector
The value of the id attribute is unique within a document; therefore, the
selector is applied only to the content of one element.
The following code fragment shows the h1 element having myHeader as
the value of the id attribute.
<H1 id="myHeader">Hello World!</H1>
The following code fragment shows the id selector, which is represented by
a hash symbol (#) and followed by the value of the id attribute.
#myHeader{ font-family: sans-serif }
In the above code fragment, myHeader is the value of the id attribute. The
CSS rule is applied to the value of the id attribute.
Example
Let's look at the following example. This example shows how to select
HTML elements using the CSS ID selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Class ID Selectors Example</title>
<style>
#green
{
color: green;
}
</style>
</head>
<body>
<h2 id="green">CSS ID Selector Tutorial</h2>
<hr/>
<p>This is Program on CSS id selector.</p>
<hr/>
<h2>CSS ID Selector Example</h2>
<p>This is example on CSS id selector.</p>
</body>
</html>
Output of the above Program
Here is one more example also demonstrates the CSS ID selector.
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
h2#green
{
color: green;
}
p#red
{
color: red;
}
</style>
</head>
<body>
<h2 id="green">CSS ID Selector Tutorial</h2>
<hr/>
<p id="green">This is tutorial on CSS id selector.</p>
<hr/>
<h2 id="red">CSS ID Selector Example</h2>
<p id="red">This is example on CSS id selector.</p>
</body>
</html>
