Pseudo Elements and Classes in CSS

Pseudo Elements and Classes in CSS

Add some beautiful styles to your element based on the user's event on elements like hovering, focusing an element, etc. Pseudo Classes are mainly used to add some modification in styles of your element based on the state of your element.

Pseudo-classes are mainly used to apply styles to your selectors, based on the fulfillment of a specific condition, following are some of the pseudo-classes which designers use most of the time.

  • a:hover : Most commonly used pseudo-class that designers use with their selectors in HTML. :hover this pseudo-class is mainly used to define the behavior of your selector when the user hovers the mouse on that element.
       a:hover {
          cursor: grab;
          color: #f76c6c;
          background-color: black;
       }
    
  • a:visited : All the effects inside this visited pseudo-class will be applied to this a tag after a user is visited the anchor tag once.
        a:visited {
          color: aqua;
          font-family: sans-serif;
        }
    
  • input:disabled : This pseudo-class is applied when our input element is in a disabled state. Check out the below example for the reference of this pseudo-class.
      input:disabled {
        color: black;
        opacity: 0.9;
      }
    
  • .table-row:nth-child(): This pseudo-class mainly used to target the entered value in the nth-child() brackets. Its value can be even, odd, or any specific value or formula as well.

The basic example we see is with data table-rows :nth-child(even) in order to apply styles on an even number of rows i.e. 2, 4, 6 siblings in the sequence

.table-row:nth-child(even) {
  background-color: #9e9e9e;
}
  • .table-head:first-child: `:first-child pseudo-class will apply the CSS styles in the first sibling of the selector in the HTML page. Matches an element that is the first of its siblings.
     .table-head:first-child {
        background-color: #9e9e9e;
        font-weight: bolder;
        font-size: 18px;
      }
    
  • .table-footer:last-child: `:last-child pseudo-class will apply the CSS styles in the last sibling of the selector in the HTML page.
      .table-footer:last-child {
        background-color: #9e9e9e;
        font-weight: bolder;
        font-size: 14px;
      }
    

Pseudo Elements in CSS

  • ::selection : This pseudo-element will target that portion on the webpage which is selected by the user on the web page. We can manage the ::selection style of our web page according to the theme of our website.
      ::selection {
        color: red;
        background: yellow;
      }
    
  • ::after : We use ::after element at the time when we want to apply any effect or add content after the element appearance on the webpage. content: 'required field' this property is mandatory in which we need to specify what we want to insert after the element.
      .required-field::after {
        content: '**';
        color: red;
      }
    
  • ::before : We use ::before element when we want to apply any effect or add content before the element appearance on the webpage. content: 'Mr/Mrs' this property is required in which we need to specify what we want to insert before our targeted element.
        .name-fields::before {
          content: 'Mr/Mrs.';
          color: black;
          font_weight: bolder;
        }
    
  • ::first-letter : ::first-letter is used at the time when we want to apply any effect on the first letter of any paragraph or our content on Webpage.
        p::first-letter {
          font-size: 22px;
          font-weight: bolder;
          font-family: 'Times New Roman';
          color: black;
         }
    

I hope this small blog helped you to learn something new or revise your concepts of CSS.