You can optimize your web page stylesheet performance using css selectors. So lets talk about CSS selectors.
1. # – The ID selector
The hastag selector in CSS can be used by pointing out specific ID given to the element.
<div id="mydiv"> This is an example of ID (#) selector in CSS. </div>
Style :
#mydiv
{
background-color:#ff4747;
color:#fff;
padding:25px;
font-size:25px;
width:300px;
}
2. . – The class selector
The class selector can be used by pointing out specific class given to the element.
<div class="mydiv"> This is an example of "Class" (.) selector in CSS. </div>
Style :
.mydiv
{
background-color:#ff4747;
color:#fff;
padding:25px;
font-size:25px;
width:300px;
}
3. The element selector
This is not a selector really. It simply selects all the element present in your webpage.
<div> <p> This is an example of Element Selector in CSS. </p> </div>
Style :
div
{
background-color: #858855;
background-color:#f16b49;
padding: 2px;
height:auto;
width:500px;
}
p
{
background-color: #000;
color: #fff;
font-size:25px;
text-align:center;
}
4. + – The Adjacent Selector
The + sign is known as the adjacent selector, as it selects only the element appearing immediately after the specific selector.
<div> <h1> CSS EXAMPLES</h1> <p> This is an example of + Adjacent Selector in CSS. </p> <p> This will not be styled. </p> </div>
Style :
div
{
background-color: #f16b49;
font-family:Arial;
height: auto;
color: #fff;
width: 500px;
font-size: 20px;
text-align: center;
}
h1 + p
{
background-color: #000;
}
5. The A B element selector
This simply selects all the elements which is specified appearing inside the element which is specified.
<div> <h1> CSS EXAMPLES</h1> <p> This is an example of Element Selector in CSS. </p> <h2> This will not be styled. </h2> <p> This will be styled. </p> </div>
Style :
div
{
background-color: #f16b49;
color: #fff;
width: 600px;
text-align: center;
}
div p
{
background-color: #000;
padding:5px;
}
6. The ~ selector
This selector selects every specified element appearing within a particular element.
<div> CSS EXAMPLES <p> This is an example of ~ Selector in CSS. </p> <a href="#">This is a styled link.</a> <br/> <a href="#">This is a styled link.</a> </div>
Style :
div
{
background-color: #f16b49;
font-family: Arial;
height: auto;
color: #fff;
width: 600px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
p ~ a
{
color:Black;
text-decoration:none;
font-style:italic;
}
7. The > selector
This will only selects the elements appearing directly within a specified element in the style.
<div> CSS EXAMPLES <p> This is an example of > Selector in CSS. </p> <h4> <p> This will not be styled. </p> </h4> </div>
Style :
div
{
background-color: #f16b49;
font-family: Arial;
height: auto;
color: #fff;
width: 600px;
padding: 1px;
font-size: 25px;
font-weight:bold;
text-align: center;
}
div > p
{
background-color: #000;
font-size: 20px;
font-weight:lighter;
}
8. The : selector
This is the one of the best selector as it helps so much to style me my webpages. There are many different uses of this selectors, like one shown below. The example explains the :hover selection.
<div> CSS EXAMPLES <br /> <input name="mytxtbox" type="text" id="mytxtbox" /> <input type="submit" name="mybutton" value="Hover here.." id="mybutton" /> </div>
Style :
div
{
background-color: #f16b49;
color: #fff;
width: 600px;
padding: 10px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
#mybutton
{
background-color: #000;
color: #fff;
font-size: 20px;
width: 150px;
font-weight: bold;
}
#mybutton:hover
{
background-color: #fff;
color: #000;
}
#mytxtbox
{
width: 250px;
font-weight: lighter;
font-size: 20px;
color:#808080;
}
#mytxtbox:focus
{
background-color: #ffff80;
color:#000;
}
See the Pen HOVER SELECTOR by HITESH S VIKANI (@hitesh1120) on CodePen