CSS Selector
§
In This tutorial we will discuss CSS
Selector and also we will learn types of CSS Selector.
§
A CSS selector is nothing it is a
pattern to match an HTML element on a web page.
§
The style rules associated with that
selector will be applied to the elements that match the selector pattern.
§
CSS selectors are used to
"find" (or select) the HTML elements you want to style.
Element Type Selectors
§
It is used to select all instance of the
element in the document with the corresponding element type name.
element_type_name
{
property_name1:value1;
property_name2:value2;
}
When
we Should go for Element Selectors:-
§
Whenever you want to simply targets an
existing HTML element then we should go for element selector.
§
For example suppose we wants to just
changed the text color of all paragraphs to red - the element selector is very
strong!
§
you can target all paragraph elements
(<p>) simply by writing the name of it in your style sheet:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
}
</style>>
</head>
<body>
<p>This is the paragraph-1</p>
<p>This is the paragraph-2</p>
<p>This is the paragraph-3</p>
<p>This is the paragraph-4</p>
<p>This is the paragraph-5</p>
</body>
</html>
Output:
The CSS id Selector§
It is used to select a particular or
specific element in the document.
§
The id selector uses the id attribute of
an HTML element to select a specific element.
§
CSS ID selector matches an element based
on the value of the element's id attribute.
§
The id of each element should be unique
within a page, so the id selector is used to select one unique element at a
time.
§
To select an element with a specific id,
ID selector is a name preceded by a hash character (“#”).
Syntax:-
#element's id attribute
{
property_name1:value1;
property_name2:value2;
....................
......................
}
When
we Should go for ID Selectors:-
§
You should use IDs if only one element
on the page should have the style applied, and/or you need a unique identifier
for that element.
§
For example suppose we wants to just
change the text color of that paragraphs whose id is first to red not all
paragraph - the id selector is very strong!
§
you can target particular paragraph
elements (<p>) simply by writing the id of it in your style sheet:
<!DOCTYPE html>
<html>
<head>
<style>
#first{
color: red;
}
</style>>
</head>
<body>
<p id="first">This is the paragraph-1</p>
<p id="second">This is the paragraph-2</p>
<p id="third">This is the paragraph-3</p>
<p id="fourth">This is the paragraph-4</p>
<p id="fifth">This is the paragraph-5</p>
</body>
</html>
Output:
The CSS class Selector
§
The CSS class selector selects elements
based on the contents of their class attribute.
§
TO select element with a specific class,
write a period (.) character, followed by the name of the class.
syntax:-
.className
{
property_name1:value1;
property_name2:value2;
....................
......................
}
When
we Should go for class Selectors:-
§
You should use class if you should use
classes when your style needs to be applied multiple times on the same page.
§
For example, you might have many <p>
elements that need the same style applied. - The class selector is very strong!
§
you can target many paragraph elements
(<p>) simply by writing the class of it in your style sheet:
§
In given example we want to change the
color of first ,third, fifth paragraph you can target first ,third, fifth paragraph elements
(<p>) simply by applying class selector in your style sheet:
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
.color{
color: red;
}
</style>>
</head>
<body>
<p class="red-text">This is the paragraph-1</p>
<p>This is the paragraph-2</p>
<p class="red-text">This is the paragraph-3</p>
<p>This is the paragraph-4</p>
<p class="red-text">This is the paragraph-5</p>
</body>
</html>
CSS Class Selector for specific element
§
Using class selector you can specify
that only specific html elements should be affected by a class.
p.center{
color:green;
text-align:center;
}
§
Now only paragraph elements should be
affected by this class.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
p.center{
color: red;
text-align: center;
}
</style>>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is red and center-aligned.</p>
</body>
</html>
Output:
Applying more than one CSS Class Selector to html element
§
In class selector Html element can also
refer to more than one class.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<p class="red">This paragraph has green text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
/* All elements with class="intro" */
.intro {
color: red;
font-weight: bold;
}
/* All <li> elements with class="yellow-bg" */
li.yellow-bg {
background: #ffa;
}
/* All <li> elements with a class list that includes both "yellow-bg" and "fancy" */
li.yellow-bg.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<h1 class="intro">Programming Lang:</h1>
<ul>
<li class="yellow-bg">Java</li>
<li >Python</li>
<li>NodeJS</li>
<li>SQL</li>
<li class="yellow-bg fancy">NoSQL</li>
</ul>
</body>
</html>
The CSS Group Selector
§
Whenever you want to apply same style of
number of Html elements then we should go for Group Selector.
Example:
h1, h2, h3, h4, h5, h6 { color: greenyellow; }
§
Each element is separated by a comma
(except for the last element before the start of the declaration).
When
we Should go for CSS Group Selectors:-
§
Suppose you want to apply the same style
on every heading (h1, h2, h3, h4, h5, h6) tag just we want to change the color: greenyellow; and text-align: center
for all heading tag, and then you have needed to define
style separately for everyone. That maximizes the lines of code. Than defining same
style for every heading tag is not better then we moves group selector.
§
For example, you might have all heading
(h1, h2, h3, h4, h5, h6) tag elements that need the same style applied. - The group
selector is very strong!
§
you can target all heading elements
(<h1-h6>) simply by writing the group selector of it in your style sheet:
§
In given example we want to change the color
and text-align of all heading tag (<h1>…<h6>) you can target all
heading elements (<h1>...</h6>) simply by applying group selector in your style sheet:
<html>
<head>
<style>
h1, h2, h3, h4, h5, h6 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading-1</h1>
<h2>This is a heading-2</h2>
<h3>This is a heading-3</h3>
<h4>This is a heading-4</h4>
<h5>This is a heading-5</h5>
<h6>This is a heading-6</h6>
</body>
</html>
CSS Universal Selector (Star)
§
The universal selector can be used to
represent any element at all, and is specified using an asterisk (*).
§
Thus, use this declaration to make sure
all elements are purple:
§
Assume for a moment that you have a
document containing the following HTML elements: an H1, some paragraphs, a
table, some preformatted text, and an unordered list.
§
Now we want to change color for of all
the elements of a html page.
§
For the purposes of this specific
document, we are using universal selector.
§
writing * {color: green;} is exactly
the same as writing:
BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI {color: green;}
§
Let’s try to understands some scenario .watch
the given below output here suppose we want to apply border to all paragraph
elements.
<html>
<head>
<style>
p{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
§
Similarly I want to Apply the border for
this div element also I can use the help of group selected so I say here div
also should have the border 2px solid red;
§
go to file and with-in style tag use p,div{border: 2px solid
red;}and
save the file go to the browser and refresh we can see that the div element has
the border red border similarly what I want is I want to apply the border to
the body also then I can use p,div,body{border: 2px solid
red;} here
file save go to browser and refresh can see that the body also has the red
border I also want to apply to the HTML element so I say here p,div,body,html{border: 2px solid
red;} file
save go to browser and refresh you can see that even the HTML document has the
red border around it I am using so many tags here you can see if I have 100
HTML element then I have to write here all those HTML elements and then I say
border 2px solid that instead of writing like this we can simply write here star. star indicates
Universal selector.
§
It selects every HTML element on the
page or it selects any HTML elements on the page and applies to 2PX solid red border.
*{border: 2px solid red;}
§
I am telling to the browser locate any
HTML element apply the border 2px solid save file go to browser and refresh we
can see that all of them have that border.
§
Universal selector is used to target
every HTML element on the page and apply styles on all HTML elements on the page.
§
Now suppose I want to apply styles to
only first two paragraphs so I have to you take help of class attribute.
<html>
<head>
<style>
.firsttwo{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p class="firsttwo">This is Paragraph-1</p>
<p class="firsttwo">This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
§
I am telling to the browser locate any
HTML element if it has a class attribute value set to firsttwo
apply the border 2px solid green save file
go to browser and refresh we can see that only first two paragraphs are
having the green border .even if I write
here *.firsttwo{border:
2px solid red;} it
works what is the meaning of star any HTML element right Universal selector it
is I am telling to the browser locate any HTML element on this page if it has
the class attribute value set to firsttwo then apply
the border 2px solid green file save go to browser and refresh let me show it
is working properly you can see that
first two paragraphs are having the red border applied without writing this
star also the same meaning star is something like of the optional thing like
that here I am telling star means any HTML element remember that .
*.firsttwo{border: 2px solid red;}
§
It selects any html element which has
class attribute value set firsttwo.
§
Now we are discussing one more example
here use the ID I say container. I am using the ID attribute to the div and I
said ID value is container what if I want to apply the border to this div
element simply I can use locate any HTML element on this page if it has the ID
called as container then apply the border 2px solid.
<html>
<head>
<style>
*#container {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
Syntax:-
*#container{
border: 2px solid red;
}
It selects any HTML element which has the ID attribute value set to container
§ Now
let's we proceed and see something more what if I want to apply style to every
paragraph in this page which is the direct child of the div element.
<html>
<head>
<style>
div>p{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
§ So
simply we can write simply like this div>p{border: 2px solid
red; } save file go to
browser and refresh we can see that all paragraph which are the direct children
of div are having the red border instead of
that simply I say here *>p{border: 2px solid
red; } what I am
telling to the browser locate any HTML element on this page if it has the
direct child P then apply the border 2px solid red. File save go to browser and
refresh I can see that is working properly.
§ Let's
proceed now I want to apply style to only first two paragraphs which are direct
child of div element .I can simply say here any HTML element if it has the
direct child called as P if it has the class attribute value set to
firsttwo. save file go to browser and refresh we can see that only
first two paragraphs which are direct children of the div having the green border.
<html>
<head>
<style>
*>p.firsttwo{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p class="firsttwo">This is Paragraph-1</p>
<p class="firsttwo">This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
Note:-
§ >
Sign
indicate direct children.
*>p{
border: 2px solid red;
}
§ It
selects any paragraph element which is the direct child of any html element.
*>p.firsttwo{
border: 2px solid red;
}
§ It
selects any paragraph element which is the direct child of any html element and
if it has the class attributes value set to firsttwo.
Author Name
Author Description!
Get Free Email Updates to your Inbox!
Post a Comment