Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Pseudo-classes and all CSS Classes
The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc.
Pseudo-classes
The following are some key Pseudo-classes −
:active = To select the active link
:checked = To select every checked <input> element
:first-child = To select the first child of an element's parent
:first-of-type = To select the first element of its parent
:focus = To select the element that has focus
:hover = To select links on mouse over
:link = To select all unvisited links
:not(selector) = Selects every element that is not a <p> element
:nth-of-type(n) = To select an element that is the second element of its parent
:only-of-type = To select an element that is the only element of its parent
:only-child = To select an element that is the only child of its parent
:out-of-range = To select elements with a value outside a specified range
:valid = To select elements with a valid value
:visited = To select all visited links
Manipulate links with CSS Pseudo-classes
When we create a link using the <a> element, then various pseudo classes are used to set the link color, visited link color, hover , active link, etc. We have achieved the same using the pseuso-classes −
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
Example
Let us see now see the code −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
The nth-of-type pseudo class
In this example, we have set different background colors based on the nth-of-type() pseudo class −
child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>
The :focus pseudo class
To select the element that has focus, use the :focus pseudo class. Here, on focus, the search field will display an outline around search box for the users to enter a search keyword −
.searchField:focus {
outline: 3px solid #ddd;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: rgb(76, 78, 175);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #4f3e8e;
}
.searchField {
box-sizing: border-box;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.searchField:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownList {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
function showDropList(){
let dropDiv = document.querySelector('.dropdownList');
if(dropDiv.style.display==="block"){
dropDiv.style.display = "";
} else {
dropDiv.style.display = "block";
}
}
document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
function filterDropdown() {
var inputSearch, filterText, ul, li, links, i,div;
inputSearch = document.querySelector(".searchField");
filterText = inputSearch.value.toUpperCase();
div = document.getElementById("myDropdown");
links = div.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
txtValue = links[i].textContent || links[i].innerText;
if (txtValue.toUpperCase().indexOf(filterText) > -1) {
links[i].style.display = "";
} else {
links[i].style.display = "none";
}
}
}
</script>
</body>
</html>
250 Views
