Learn more selectors part-2

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;
        }

deepak valluri's Blog