- The HTML Elements are categorized in Real Elements, Pseudo Elements, Real Classes,Pseudo Class.
- Example of Real Elements and Real Classes,
<html>
<head>
<title>Real Elements And Classes</title>
<style>
.author-name{
color : green;
}
</style>
</head>
<body>
<div class="author-name">
Sandeep
</div>
</body>
</html>
Firebug Inspection:
- The Firefox and Firebug will display,
- Now add a css for hover attribute,
<style>
.author-name:hover{
color:orange;
}
</style>
- Firebug console is detecting pseudo class: hover is applied for element div and color is changed to orange.
- Firebug Inspection,
- Some other pseudo classes examples are :link , :visited, :active, :hover, :focus :first-child.
- Pseudo element is an element that we cannot find while inspecting, though we can modify it. Like “bullet” element is prepended before a “LI” element.
- Let the HTML code is modified as,
<html>
<head>
<title>Real Elements And Classes</title>
<style>
.author-name{
color : green;
}
</style>
</head>
<body>
<ul class="author-name">
<li>Sandeep</li>
</ul>
</body>
</html>
- Firebug inspection,
- Some Other pseudo elements are :after, :before, ::first-letter, ::first-line, ::selection.
- Example of a menu item arrow point on hover below.
- Let the HTML code,
<!DOCTYPE html>
<html>
<head>
<title>Real Elements And Classes</title>
<style>
.author-name{
background: white;
}
.author-name li{
width:100px;
background: lightSteelBlue;
margin: 0.5px;
margin-bottom: 1px;
color:lightSteelBlue;
list-style: none;
}
.author-name li:hover:after{
content:'25BA';
float: right;
font-size: inherit;
margin-right: -13px;
opacity: 0.5;
position: relative;
}
.author-name li span.in-name{
color : white;
}
</style>
</head>
<body>
<ul class="author-name">
<li><span class="in-name">Sandeep</span></li>
<li><span class="in-name">Surabhi</span></li>
<li><span class="in-name">Sangeeta</span></li>
<li><span class="in-name">Sumanta</span></li>
</ul>
</body>
</html>
- Output and Firebug inspection,
- Some other Pseudo elements are,
<!DOCTYPE html>
<html>
<head>
<title>Real Elements And Classes</title>
<style>
.names div{
divst-style: none;
color : grey;
}
.names div.in-name-music:before{
content:'266C';
font-size: inherit;
opacity: 0.5;
color :orange;
}
.names div.in-name-call:before{
content:'260E';
font-size: inherit;
opacity: 0.5;
color :orange;
}
.names div.in-name-mail:before{
content:'2709';
font-size: inherit;
opacity: 0.5;
color :orange;
}
.names div.in-name-ship-product:before{
content:'2638';
font-size: inherit;
opacity: 0.5;
color :orange;
}
</style>
</head>
<body>
<div class="names">
<div class="in-name-music">My Music</div>
<div class="in-name-call">My Contact : +91 - 1234567890</div>
<div class="in-name-mail">Mail Me : abcdef@xyz.com</div>
<div class="in-name-ship-product">Ship Product</div>
</div>
</body>
</html>
Output:-
