what are pseudo classes and pseudo elements?

Pseudo classes and pseudo elements can certainly be handful. they provide soo many possibilities its just overwhelming. here pseudo classes enables us to target specific element when its in particular state as if a new class is created in DOM. where as pseudo elements acts as if a whole new element is added and enables us to style. let's understand in detail.

what is pseudo class ?

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. Pseudo-classes are keywords that start with a colon :

Syntax:

:pseudo-class-name

example:

                       button:hover{
                             color:#000;
                    }

list of pseudo classes and its usage:

:active -> it activates an element.
:focus -> it will select element that are the current focus of the keyboard.
:hover -> when a mouse cursor rolls over the element it will be in hover state.
:link -> This selects element that has an href attribute.
:enabled -> it represents that element is ready to be used.
:disabled ->element is disabled.
:checked -> selects the elements that are checked.
:selected ->element is highlighted by the user.
:nth-child() ->it is position or number based selector. selects elements using algebraic expressions.
:nth-of-type() ->Works like :nth-child, but used in places where the elements at the same level are of different types.
:first-child ->selects 1st element within parent section.
:last-child ->selects last element within parent section. - :first-of-type() ->selects an element that is 1st sibling of its type.
:last-of-type() -> selects an element that is last of sibling of its type .
:root ->selects element that is root of dom.
:required ->often applied to the input section. this property makes sure that input meets the criteria.

What is a pseudo-element?

Pseudo-elements are much similar to pseudo class. However, they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::

double colon (::) vs single colon(:)

::first-line (vs) :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements. The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1. For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

syntax:

            selector::pseudo-element {
                  property: value;
            }

list of pseudo elements:

::first-line ->element is used to add a special style to the first line of a text. and can only be applied to block-level elements.
::after -> used to add content to an element within the content property. It is inline by default. It creates pseudo element that is last child of given element.
::before ->similar to ::after but creates pseudo element that is 1stchild of given element.
::placeholder ->it represents the placeholder text in an or
::marker ->it selects the marker box of a list item, which contains a bullet or number. It works on any element or pseudo-element set to display: list-item.

example 1:

 ``` 
      <html>
      <head> 
      <title>example</title>
      </head>
       <body>
        <p>The sailfish is named for its sail-like dorsal fin and is widely considered the fastest fish in 
               the ocean. <a href="https://en.wikipedia.org/wiki/Sailfish">You can read more about it           
               here</a>
        </p>

        <p>The red lionfish is a predatory scorpionfish that lives on coral reefs of the Indo-Pacific     
               Ocean and more recently in the western Atlantic. <a href="" class="dead-link">You can 
                read more about it here</a>
        </p>
        </body>
        </html>

CSS

    ```
              a::after {
                    content: ' (' attr(href) ')';
               }

               .dead-link {
                     text-decoration: line-through;
                }
               .dead-link::after {
                     content: url('../../media/warning.svg');
                     display: inline-block;
                     width: 12px;
                     height: 12px;  
                }

example 2

HTML

           ```
                <html>
                <head> 
                <title>example</title>
                </head>
                <body>
                          <label for="first-name">Your phone number:</label><br>

                          <input type="tel"  name="phone" minLength="9" maxLength="9"
                             placeholder="It must be 9 digits">
                </body>
                </html>

CSS

  ```
          input {
                margin-top: 0.5rem;
          }

          input::placeholder {
                font-weight: bold;
                opacity: .5;
                color: red;
          }

Understanding "PSEUDO selectors"

Table of contents