Pseudo-classes and CSS Classes

CSSWeb DevelopmentFront End Technology

CSS Pseudo-classes can be combined with CSS classes rather than elements themselves to provide a more selective approach to an Html element.

Example

Let’s see an example for combining CSS Pseudo-classes and CSS classes −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   padding: 10px;
   text-align: center;
   border: 1px solid black;
}
.Italy:lang(it)::after {
   padding: 20px;
   content: '~ Italy';
   font-style: italic;
}
.Spain:lang(es)::after {
   padding: 8px;
   content: '~ Spain';
   font-style: italic;
}
.Germany:lang(nl)::after {
   padding: 20px;
   content: '~ Belgium';
   font-style: italic;
}
.Spain:lang(es){
   background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
   background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
   background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>

Output

Following is the output −

Example

Let’s see another example for combining CSS Pseudo-classes and CSS classes −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-child(1){
   background-color: #FF8A00;
}
.child:nth-child(2){
   background-color: #F44336;
}
.child:nth-child(3){
   background-color: #C303C3;
}
.child:nth-child(4){
   background-color: #4CAF50;
}
.child:nth-child(5){
   background-color: #03A9F4;
}
.child:nth-child(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Classes and CSS Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

Output

This will produce the following output −

raja
Published on 08-Jan-2020 08:03:49
Advertisements