Attribute Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="vieport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS_tutorial/style_six.css">
<title>Attribute selector</title>
</head>
<body>
<h2>Links<h2>
<a href="https://google.co.in">Google India</a><br>
<a href="https://google.co.uk">Google Uk</a><br>
<a href="https://flipkart.com">Flipkart</a><br>
<a href="facebook.com">Facebook</a><br>
<h2>Form</h2>
<form>
<label for="fname">First name : </label><br>
<input type="text" id="fname"><br>
<label for="lname">Last name : </label><br>
<input type="text" id="lname"><br>
<label for="pass">Password : </label><br>
<input type="password" id="pass"><br><br><br>
<input type="button" value="Submit">
</form>
</body>
</html>
input[type = "text"]{
color: white;
background-color: gray;
}
/* For those whose "type" Starts with "t" as shown below*/
/* input[type ^= "t"]{
color: forestgreen;
} */
input[type = "password"]{
background-color: pink;
}
/* a[href = "https://google.co.in"]{
color: blue;
} */
/* For Containing "google" only as shown below*/
/* "*=" means containing "google" anywhere in href as shown below */
/* a[href *= "google"]{
color: red;
} */
/* For only those Starts with "https" as shown below*/
/* "^" is known as caret symbol */
/* a[href ^= "https"]{
color: green;
} */
/* For only those Ends with ".com" as shown below*/
/* a[href $= ".com"]{
color: brown;
} */
Comments
Post a Comment