Scribd
Upload
48 views

CSS Selector

Selectors are patterns used to select elements and apply CSS styles. There are different types of selectors including universal, type, class, and ID selectors. The universal selector selects all elements, type selectors select elements by their type (e.g. h1, p), class selectors select elements with a specific class, and ID selectors select elements with a unique ID. Examples demonstrate applying styles like font colors to different elements using these selector types.

Uploaded by

Amar Dhal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

CSS Selector

Selectors are patterns used to select elements and apply CSS styles. There are different types of selectors including universal, type, class, and ID selectors. The universal selector selects all elements, type selectors select elements by their type (e.g. h1, p), class selectors select elements with a specific class, and ID selectors select elements with a unique ID. Examples demonstrate applying styles like font colors to different elements using these selector types.

Uploaded by

Amar Dhal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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>

You might also like