CSS | Pseudo-Classes & Elements

Video Tutorial Link: https://youtu.be/dgPGA5nYKX0

Pseudo-class

The CSS pseudo-classes allow you to style the dynamic states of an element such as hover, active and focus state, as well as elements that are existing in the document tree but can't be targeted via the use of other selectors without adding any IDs or classes to them, for example, targeting the first or last child elements.

A pseudo-class starts with a colon (:). Its syntax can be given with:

selector: pseudo-class { property: value; } 

Anchor Pseudo-classes

These pseudo-classes let you style unvisited links differently from visited ones. The most common styling technique is to remove underlines from visited links.

   a:link {

        color: blue;

      }

      a:visited {

        text-decoration: none;

      }

Some anchor pseudo-classes are dynamic, they're applied as a result of user interaction with the document like on hover, or on focus etc.

   a:hover {

        color: red;

      }

      a:active {

        color: gray;

      }

      a:focus {

        color: yellow;

      }

These pseudo-classes change how the links are rendered in response to user actions.

:link  – It adds style to the unvisited link.

:visited  – It selects the visited links and adds special styles to them. Its possible values can be any color name in a valid format.

:hover  – This pseudo-class adds a special style to an element when the user moves the cursor over it. If you want to make it effective, it must be applied after the ":link" and ":visited" pseudo-classes.

:active  – It applies when the elements are clicked or activated. It selects the activated element.

:focus  – applies when the element has keyboard focus. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well. 

Input & link related pseudo class selectors

:focus – It selects the elements that are currently focused on by the user. It is generally used in input elements of the forms and triggers when the user clicks on it.

:enabled – Selects inputs that are in the default state of enabled and ready to be used.

:disabled – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.

:checked – Selects checkboxes that are, wait for it, checked.

:required – Selects inputs with the required attribute.

 

See the Pen Pseudo Class Selectors by PANKAJ (@pankkap) on CodePen.

The :first-child Pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element. The selector ol li:first-child in the example below select the first list item of an ordered list and removes the top border form it.

      ol li:first-child {
        color: red;
      }

 

The :last-child Pseudo-class

The :last-child pseudo-class matches an element that is the last child element of some other element. The selector ul li:last-child in the example below select the last list item from an unordered list and removes the right border from it.

  ul li:last-child {

        color: blue;

      }

The :nth-child Pseudo-class

The CSS3 introduces a new :nth-child pseudo-class that allows you to target one or more specific children of a given parent element. The basic syntax of this selector can be given with :nth-child(N), where N is an argument, which can be a number, a keyword (even or odd), or an expression of the form xn+y where x and y are integers (e.g. 1n, 2n, 2n+1, …).

       table tr:nth-child(2n) td {

        background: #eee;

      }

 

The style rules in the example above simply highlight the alternate table row, without adding any IDs or classes to the <table> elements.

 

Tip: The CSS :nth-child(N) selector is very useful in the situations where you have to select the elements that appears inside the document tree in a specific interval or pattern like at even or odd places, etc.

  

The :lang Pseudo-class

The language pseudo-class :lang allows constructing selectors based on the language setting for specific tags. The :lang pseudo-class in the example below defines the quotation marks for <q> elements that are explicitly given a language value of no. 

See the Pen nth-child Pseudo Class Selectors by PANKAJ (@pankkap) on CodePen.

 

Pseudo Elements

Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal markup, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where it belongs. It also allow you to style the elements or parts of the elements without adding any IDs or classes to them. It will be really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or you want to insert some content before or after an element, etc. only through style sheet.

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes. The new syntax of the pseudo-element can be given with:

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

 Here is a list of pseudo-elements in CSS3:

::first-line

::first-letter

::before

::after

 

The ::first-line Pseudo-element

The ::first-line pseudo-element applies special style to the first line of a text.

The style rules in the following example formats the first line of text in a paragraph. The length of first line depends on the size of the browser window or containing element.

p::first-line {

    color: #ff0000;

    font-variant: small-caps;

}

Note: The CSS properties that can be applied to the ::first-line pseudo-element are: font properties, background properties, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of the first line of a text. The style rules in the following example formats the first letter of the paragraph of text and create the effect like drop cap.

p::first-letter {

    color: #ff0000;

    font-size: xx-large;

}

Note: The CSS properties that can be applied to the ::first-letter pseudo-element are: font properties, text-decoration, text-transform, letter-spacing, word-spacing, line-height,  float,  vertical-align ( only if 'float' is 'none'), color, margin and padding properties, border properties, background properties.

See the Pen ::first-letter ::first-line and ::selection by PANKAJ (@pankkap) on CodePen.

::selection

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. There are a few properties that can be used on the ::selection pseudo-element: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, and text-shadow.

      p::selection {

        background-color: red;

      }

If you check it out in your browser, it will look like this: 

 

The ::before and ::after Pseudo-element

The ::before and ::after pseudo-elements can be used to insert generated content either before or after an element's content. The content CSS property is used in conjunction with these pseudo-elements, to insert the generated content.

This is very useful for further decorating an element with rich content that should not be part of the page's actual markup. You can insert regular strings of text or an embedded object such as image and other resources using these pseudo-elements.

       selector ::before {
        property: value;
      }
      selector ::after {
        property: value;
      }

See the Pen ::before and ::after Pseudo Elements by PANKAJ (@pankkap) on CodePen.

Important Note: Single-colon vs. Double-colon

There’s a bit of discussion about the right way of using pseudo-elements – the old style single-colon (:before), used in CSS specifications 1 and 2, versus the CSS3 recommendation, double-colon (::before), mainly to “establish a discrimination between pseudo-classes and pseudo-elements”.

But for compatibility reasons, the single-colon method is still accepted. Keep in mind that IE8 supports the single-colon notation only.

 Video Tutorial Link: https://youtu.be/mGa6TpLQkd8