WEB DEV LEARNING

Day 4 Web Devlopement

CSS SELECTOR

Ranjeet Singh's photo
Ranjeet Singh
·

2 min read

Table of contents

No heading

No headings in the article.

Pseudo Element and Pseudo Classes :
Pseudo-classes in CSS are keywords that are used to select and style specific elements based on their state or position in the HTML document.

They allow you to apply styles to elements that cannot be selected with regular selectors, such as elements that are being hovered over, clicked, or are the first child of a parent element. Pseudo-classes are denoted by a colon (:) followed by the keyword.

Here are some commonly used pseudo-classes in CSS :

  1. : hover -> It selects an element when it is being hovered over by the mouse pointer.

    Whenever you point over Lorem's text you change in color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        p:hover{
            color: #7d2525;
        }  
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</body>

  1. : active ->It selects an element while it is being activated

    (e.g., clicked or tapped).

     <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Research on CSS slector</title>
     <style>
         /* :active */
         .btn:active{
             background-color: #68d92f;
         }
     </style>
 </head>
 <body>
     <input class="btn" type="button" value="save">
 </body>
 </html>

    1. :focus: It selects an element when it has focus (e.g. when it is selected by using the keyboard or mouse).

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Research on CSS slector</title>
     <style>
         .btn:focus{
             background-color: #1cc11f56;
             color: #000000;
             height: 20px;
             width: 200px;
         }
     </style>
 </head>
 <body>
     <label for="name">Name</label>
     <input type="text" class="btn"> <br>
     <label for="email">Email</label>
     <input type="email" class="btn"><br>
     <label for="password">Password</label>
     <input type="password" class="btn"> <br>
 </body>
 </html>

      1. visited -> When we visit that link it turns our text color that

        represents this link is visited which increases the accessibility of our web page.

         <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Research on CSS slector</title>
     <style>
         /* visited */
         #google:hover{
             color: #ff0000;
         }
         #google:visited{
             color: #4cb537;
         }
         #google:link{
             color: #000000;
         }    
     </style>
 </head>
 <body>
     <a id="google" href="https://www.google.com/">Google</a> 
 </body>
 </html>

        1. Nth child Selector ->

          : first-child -> It selects the first child element of its parent.

          : last-child ->It selects the last child element of its parent.

          : nth-child(n) -> It selects elements based on their position within their parent element. You can use different formulas like "n", "even", "odd", or specific numbers to target specific elements.

GIT HUB https://github.com/ranjeet7287/FullWDStackPerp/tree/main/06_CSS_CLASS_PART_2

Linkedin

https://www.linkedin.com/in/ranjeet-singh-71b68a239/

Email

HTML5CSSJavaScriptFrontend DevelopmentArtificial Intelligence