Explore and learn a few things...
Attribute selectors:
To select an element, we have different ways of using a group of selectors. It depends on the presence of certain attributes.
a[target] {
background-color: yellow;
}
we can make a selection based on the presence of an attribute with a particular value
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.google.com">google.com</a>
<a href="http://www.indiabix.com" target="_blank">indiabix.com</a>
<a href="http://www.BSNL.org" target="_top">BSNL.org</a>
</body>
</html>
pseudo-classes and pseudo-elements:
The pseudo-class for example selects an element only when it is being hovered over by the mouse pointer
a: hover{
color: #383CC1;
}
::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.
p::first line {
color: #6EC72D;
front-variant: small-caps;
}
Combinators:
The final group of selectors combines other selectors to target elements within our documents. The following, for example, selects paragraphs that are direct children of <div> elements using the child combinator (>):
/* child selectors*/
div > p {
color: red;
}
div , p {
color: red;
}
/* Adjacent sibling selector */
div + p {
color: red;
}
Focus:
The focus is also a method like a hover. It is used to apply some features to particular elements. we can give input focus too.
input[type=text]:focus{
color: #D31A50;
background-color: #E1A2B8;
}