CSS PSEUDO CLASSES AND ELEMENTS

Posted by GMI Blogger Posted in Uncategorized

Aug 27 2019 at 5:35am

What Are CSS Pseudo Classes?

Pseudo classes are used in CSS to define a specific state of an element.

Basic syntax for using pseudo class is,
element:pseudo_class { property: value; }

Pseudo classes are mostly used by web designers to define the dynamic states of an element based on user interaction.

like,

  • Applying a style to an element when users hover over it.
  • Style an element when it gets focus.

Example of Pseudo Classes

Pseudo ClassDescription
:activeFor styling active links
:checkedFor styling every checked element
:disabledFor styling every disabled element
:emptyFor styling every element that has no children
:enabledFor styling every enabled element
:first-childFor styling every elements that is the first child of its parent
:first-of-typeFor styling every element that is the first element of its parent
:focusFor styling the element that has focus
:hoverFor styling links on mouse over
:in-rangeFor styling elements with a value within a specified range
:invalidFor styling all elements with an invalid value
:lang(language)For styling every element with a lang attribute value.
:last-childFor styling every elements that is the last child of its parent
:last-of-typeFor styling every element that is the last element of its parent
:linkFor styling all unvisited links
:not(selector)For styling every element that is not a element
:nth-child(n)For styling every element that is the second child of its parent
:nth-last-child(n)For styling every element that is the second child of its parent
:nth-last-of-type(n)For styling every element that is the second element of its parent
:nth-of-type(n)For styling every element that is the second element of its parent
:only-of-typeFor styling every element that is the only element of its parent
:only-childFor styling every element that is the only child of its parent
:optionalFor styling elements with no “required” attribute
:out-of-rangeFor styling elements with a value outside a range
:read-onlyFor styling elements with a “readonly” attribute
:read-writeFor styling elements with no “read only” attribute
:requiredFor styling elements with a “required” attribute
:rootFor styling the document root element
:targetFor styling the current active element
:validFor styling all elements with a valid value
:visitedFor styling all visited links

What Are Pseudo Elements?

Pseudo elements differ from pseudo classes in that, they are used to style a specific ‘part’ of an element.
If you need to insert certain content after or before an element you can use “Pseudo elements”

Basic syntax for using pseudo class is,

element::pseudo_element { property: value; }

Some pseudo elements are,

Pseudo ElementDescription
::afterInsert content after
::beforeInsert content before
::first-letterStyle the first letter
::first-lineStyle the first line
::selectionStyle the portion of an element that is selected by a
user

Sharing is caring!

(Visited 167 times, 1 visits today)

Sharing is caring!

0 comments

Leave a comment

Your email address will not be published.