Use the CSS :checked selector to style every checked element. You can try to run the following code to implement the :checked selector:ExampleLive Demo                    input:checked {             height: 20px;             width: 20px;          }                     Fav sports:                Football          Cricket           Tennis          Tennis           Output

To style the active links, use the CSS :active selector. You can try to run the following code to style the active linksExampleLive Demo                    a:active {             background-color: green;          }                     Welcome to Qries       Click on the above link to see the effect.    

Use the CSS :active selector to style the active links. You can try to run the following code to implement the :active selector −ExampleLive Demo                    a:active {             background-color: orange;          }                     Welcome to Qries       Click on the above link to see the effect.    

You can try to run the following code to implement :focus pseudo-classExampleLive Demo                    input:focus {             background-color: orange;          }                              Subject          Student:          Age:                     Output

The selectors in CSS are patterns to select the element to style.Let us see the key selectors in CSS −SelectorDemoDescription class.demoSelects all elements with class="demo"#id#myidSelects the element with id="myid"**Used to select all the elements

The descendant selector in CSS is used to match all elements that are descendants of a specified element.ExampleYou can try to run the following code to implement CSS Descendent Selector:Live Demo                    div p {             background-color: orange;          }                              Para 1 in the div          Para 2 in the div             Para 3 outside the div.     Output

Use the child selector, if you want to select all elements immediate children of a specified element.div > pExampleYou can try to run the following code to implement CSS Child SelectorLive Demo                    div > p {             background-color: orange;          }                              Para 1 in the div.                    Para 2 in the div.             Para 3 outside the div.     Output

To align elements using the float property in CSS, you can try to run the following code −ExampleLive Demo                    .demo {             float: right;             width: 200px;             border: 1px dashed blue;             padding: 5px;          }                     Heading                This is demo text and right aligned.           Output

The CSS overflow-x allows you to decide what to do with the left right edges of the content.ExampleYou can try to run the following code to implement the overflow-x propertyLive Demo                    div {             background-color: orange;             width: 250px;             height: 45px;             border: 2px solid blue;             overflow-x: hidden;             overflow-y: scroll;          }                     Heading       Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y.     Output

The CSS overflow-y allows you to decide what to do with the top bottom edges of the content. You can try to run the following code to implement the overflow-y property −ExampleLive Demo                    div {             background-color: orange;             width: 250px;             height: 45px;             border: 2px solid blue;             overflow-x: hidden;             overflow-y: scroll;          }                     Heading       Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y.     Output