Scribd
Upload
5 views

CSS Selectors With Examples

For Web development learners

Uploaded by

suganya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS Selectors With Examples

For Web development learners

Uploaded by

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

CSS Selectors

Selector is a syntax to select the element


First we have to select the element and then we have to apply style.
1. Tag selector
2. Id selector
3. Class selector
4. Compound selector
5. Grouping selector
6. Child selector
7. Direct child selector
8. Attribute selector
Tag Selector: It selects all instances (examples) of a specific tag.
Syntax: tag
<html>
<head>
<title>Tag selector Example</title>
<style>
p{
background-color:#9b59b6;
}
</style>
</head>
<body>
<p>It selects all instances (examples) of a specific tag.</p>
<p>Syntax: tag</p>
<p>It selects all instances (examples) of a specific tag. </p>
</body>
</html>
Id selector: It selects single instance of the specific tag, based on id.
Syntax: #id
<html>
<head>
<title>Id selector Example</title>
<style>
#p1{
background-color:skyblue;
}
</style>
</head>
<body>
<p id="p1"> Id selector example</p>
<p> It selects single instance of the specific tag, based on id.</p>
<p> Syntax: #id</p>
</body>
</html>

Class selector: It selects few elements that are having a specific class.
Syntax: .class name
<html>
<head>
<title>
Class selector Example
<</title>
<style>
.class1{
background-color:skyblue;
}
</style>
</head>
<body>
<p class="class1"> class selector example</p>
<p> It selects few elements that are having a specific class.</p>
<p class="class1"> It selects few elements that are having a specific class.</p>
<p> It selects few elements that are having a specific class.</p>
<p> It selects few elements that are having a specific class.</p>
<p class="class1"> It selects few elements that are having a specific class.</p>
<p> Syntax: .class name</p>
</body>
</html>

Compound selector: It selects one or more elements based on tag name and class
name.
Syntax: Tag. class name
<html>
<head>
<title>compound selector example</title>
<style>
p.class1{
background-color:#E91E63;
}
</style>
</head>
<body>
<p class="class1"> compound selector example</p>
<p> It selects one or more elements based on tag name and class name.</p>
<p class="class1"> It selects one or more elements based on tag name and class name.</p>
<p> It selects one or more elements based on tag name and class name.</p>
<p> It selects one or more elements based on tag name and class name.</p>
<p class="class1"> It selects one or more elements based on tag name and class name.</p>
<p>It selects one or more elements based on tag name and class name.</p>
<b class="class1">It selects one or more elements based on tag name and class name.</b><br/>
<b>It selects one or more elements based on tag name and class name.</b><br/>
<span class="class1"> It selects one or more elements based on tag name and class
name.</span><br/>
<span>Syntax: Tag. class name</span>
</body>
</html>
Grouping selector: It selects a set of tags.
Syntax: tag1, tag2, tag3 ………
<html>
<head>
<title>grouping selector<</title>
<style>
p,span,b{
background-color:skyblue;
border:3px solid red;
padding:10px;
}
</style>
</head>
<body>
<p > Grouping selector example</p>
<p> It selects a set of tags.</p>
<p> It selects a set of tags.</p>
<p> It selects a set of tags.</p>
<p> Syntax: tag1, tag2, tag3 ………</p>
<p>It selects a set of tags.</b>
<b>It selects a set of tags.</b>
<span> It selects a set of tags.</span>
<span>It selects a set of tags.</span>
</body>
</html>

Child selector: It selects all instances of the specific child that are present inside
the specific parent. (including grandchildren)
Syntax: parent child
<html>
<head>
<title>child selector example</title>
<style>
div p{
background-color:lightgreen;
border:3px dotted yellow;
}
</style>
</head>
<body>
<div>
<p > It selects all instances of the specific child that are present inside the specific parent.
(including grandchildren)</p>
<p> Syntax: parent child</p>
</div>
<p> child selector example</p>
<p>It selects all instances of the specific child that are present inside the specific parent.
(including grandchildren)</b>
<b>bold2</b>
<span> span1</span>
<span>span2</span>
</body>
</html>

Direct child selector: It selects all the direct children of the specific parent.
(excluding grand children)
Syntax: parent>child
<html>
<head>
<title>Direct child selector<</title>
<style>
div>p{
background-color:lightgreen;
border:3px dotted yellow;
}
</style>
</head>
<body>
<div>
<p > It selects all the direct children of the specific parent. (excluding grand children)</p>
<p> Syntax: parent>child</p>
<b>
<p> Direct child selector example</p>
<p> Direct child selector example</p>
</b>
<p>Direct child selector example</p>
<p>Direct child selector example</p>
</div>
<p>Direct child selector example</p>
<b>bold1</b>
<b>bold2</b>
<span> span1</span>
<span>span2</span>
</body>
</html>

Attribute selector: it selects the element based on the attribute value.


Syntax: tag[attribute=”value”]
<html>
<head>
<title>Attribute selector example</title>
<style>
img[src="1.jpg"]{
border: 4px solid red;
}
</style>
</head>
<body>
<h1>Attribute selector example</h1>
<p>it selects the element based on the attribute value.
Syntax: tag[attribute=”value”]
</p>
<img src="1.jpg" width="200px">
<img src="2.jpg" width="200px">
<img src="3.jpg" width="200px">
<img src="j.jpg" width="200px">
<img src="1.jpg" width="200px">
</body>
</html>

Hover selector: It applies the style only when the user places mouse pointer on the
element.
Syntax: tag name. hover
<html>
<head>
<title>Hover selector example</title>
<style>
p:hover{
background-color:pink;
}
button{
border: 1px solid #3498db;
background-color:lightgreen;
padding:10px;
box-shadow:0px 0px 3px 1px #e74c3c ;
transition:box-shaow 1s;
}
button:hover{
background-color:darkgreen;
color:white;
box-shadow:0px 0px 3px 3px #e74c3c;
}
</style>
</head>
<body>
<p> Hover selector example</p>
<p> It applies the style only when the user places mouse pointer on the element.
Syntax: tag name. hover
</p>
<p> It applies the style only when the user places mouse pointer on the element.
Syntax: tag name. hover
</p>
<p> It applies the style only when the user places mouse pointer on the element.
Syntax: tag name. hover
</p>
<button>ok</button>
<button>cancel</button>
<button>submit</button>
</body>
</html>

You might also like