CSS Selectors – 1

CSS selectors are patterns used for selecting elements to which the styles need to be applied.

The first one is the inline style where the style is written inside the html element.



<h1 style="background-color: red;color:blue;">Hello</h1>


*

selects all elements

and
h3 will select the <h3> element


<!DOCTYPE html>

<html>
<head>
<title>Classes and Id</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*
{
background-color: teal;
}
h3
{
background-color:darkgreen;
}
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<h3>This is H3</h3>
</body>
</html>

 

h3, p will select h3 and p elements

div h1 will select h1 inside div

div + p will select all p placed directly after div

div>h3 will select all h3 where parent is div

p~ul

select every ul  preceded by p


<!DOCTYPE html>

<html>
<head>
<title>Classes and Id</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

h3,p
{
background-color:darkgreen;
}
div h1{
background-color:pink;
}
div+ p{
background-color: teal;
}
div>h3{
background-color: yellow;
}
p~ul{
background-color: khaki;

}
</style>
</head>
<body>
<ul>
<li>Jan</li>
<li>Mar</li>
<li>May</li>
</ul>
<p>
This is a paragraph
</p>
<h3>This is H3</h3>
<div>
<h1>H1 inside div</h1>

</div>
<div></div>
<p>P after div</p>
<p>2nd P after div</p>
<div>
<h3>H3 inside P</h3>
</div>
<ul>
<li>Jan</li>
<li>Mar</li>
<li>May</li>
</ul>
<div></div>

<p></p>
</body>
</html>

 

 

 

Leave a Reply