What is a pseudo-class? Explain with an example?

1.	What is a pseudo-class? Explain with an example?
Answer» For the above SCENARIO, we NEED to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one. /* :read-only pseudo-class is USED for the input element */ input:read-only{ background: cyan; } From the above code, we can SEE that we have used the input selector to select the input element, and the: read-only pseudo-class TARGETS the required element. And the cyan color is added using background property.

Answer»

For the above SCENARIO, we NEED to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one.

/* :read-only pseudo-class is USED for the input element */ input:read-only{ background: cyan; }

From the above code, we can SEE that we have used the input selector to select the input element, and the: read-only pseudo-class TARGETS the required element. And the cyan color is added using background property.

Discussion

No Comment Found

Related InterviewSolutions

Explain the rule set in CSS?
What is specificity?
Explain Gradients in CSS?
Mention types of selectors?
What are pseudo-elements? Explain with an example.
What are CSS combinators?
<div id="outer"> <div id="inner"></div> </div>
Write the style to display inner div in center for the below HTML code?
How to draw a triangle using CSS?
body { margin: 0; font-family: Arial; background-color: #f2f2f2; } .box { color: #fff; padding: 1em; text-align: center; background-color: #efefef; } .a { background-color: purple; } .b { background-color: violet; } .c { background-color: burlywood; } .d { background-color: gainsboro; } .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; }