Pseudo selector in css

technical talkiess
0

 Pseudo selector:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>Pseudo Element </title>

</head>

<style>

.container{

width: 233px;

display: block;

margin: 23px auto;

}

/* pseudo selector it is target the inpute text tag in the given

form */

input[type='text']{

color: green;

background-color: yellow;

background-color: whitesmoke;

font-size: 23px;

}

input[type='email']{

color: green;

background-color: blue;

background-color: whitesmoke;

font-size: 23px;

border: 3px solid blue;

}

/* target ke hisab se input box ko aur anchor tag ko tag karta hai

*/

a[target='_blank']{

color: green;

font-size: 20px;

background-color: blue;

color: white;

}

a[target='_self']{

color: green;

font-size: 20px;

background-color: yellow;

color: black;

}

/* list ke 3 element ko tag karta hai */

li:nth-child(3){

background-color: yellow;

}

/* har 2 element ko select karne ke liye iska use karte hai */

li:nth-child(2n+0){

background-color: green;

}

/* har 3 element ko select karne ke liye iska use karte hai */

li:nth-child(3n+0){

background-color: blanchedalmond;

}

/* even or odd number list item */

li:nth-child(odd){

color: red;

}

/* even number ke liye */

li:nth-child(even){

color: cyan;

}

</style>

<body>

<div class="container">

<a href="http://google.com" target="_blank">Google</a>

<a href="http://facebook.com" target="_self">facebook</a>

<form action="" class="form">

<input type="text" name="" id="" placeholder="Enter your

name">

<input type="email" name="" id="" placeholder="Enter your

email">

<input type="submit" value="Submit">

</form>

<ul>

<li class="item" id="item1">List 1</li>

<li class="item" id="item2">List 1</li>

<li class="item" id="item3">List 1</li>

<li class="item" id="item4">List 1</li>

<li class="item" id="item5">List 1</li>

<li class="item" id="item6">List 1</li>

<li class="item" id="item7">List 1</li>

<li class="item" id="item8">List 1</li>

</ul>

</div>

</body>

</html>


Post a Comment

0Comments

Thanks you for commenting your questions. I will see question and respond you.

Post a Comment (0)