✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

CSS Pseudo-Class and Elements

A Pseudo-Class is used to define the special styling and special apperance to the elements like show different style when a mouse cursor is over it etc.


Syntax of using Pseudo-Class

selector:pseudo-class
{
property:value;
}

Example of Pseudo-Class

/* For unvisited link */
a:link 
{
    color: blue;
}

/* For visited link */
a:visited
{
    color: red;
}

/* For mouse over link */
a:hover
{
    color: green;
}

/* For selected link */
a:active
{
 color: orange;
}

All Pseudo-Classes

  • :linkis used to select all unvisited links

  • :active is used to select the active link

  • :visitedis used to select all visited links

  • :hoveris used to select links on mouse over

  • :rootis used to select the document's root element

  • :enabledis used to select every enabled <input> element

  • :disabledis used to select every disabled <input> element

  • :checkedis used to select every checked <input> element

  • :focusis used to select the <input> element that has focus

  • :notis used to select every element that is not a <p> element

  • :emptyis used to select every <p> element that has no children

  • :invalidis used to select all <input> elements with an invalid value

  • :langis used to select every <p> element with a lang attribute value

  • :optionalis used to select <input> elements with no "required" attribute

  • :read-writeis used to select <input> elements with no "readonly" attribute

  • :last-childis used to select every <p> elements that is the last child of its parent

  • :only-childis used to select every <p> element that is the only child of its parent

  • :requiredis used to select <input> elements with a "required" attribute specified

  • :first-childis used to select every <p> elements that is the first child of its parent

  • :in-rangeis used to select <input> elements with a value within a specified range

  • :read-onlyis used to select <input> elements with a "readonly" attribute specified

  • :nth-childis used to select every <p> element that is the second child of its parent

  • :out-of-rangeis used to select <input> elements with a value outside a specified range

  • :last-of-typeis used to select every <p> element that is the last <p> element of its parent

  • :first-of-typeis used to select every <p> element that is the first <p> element of its parent

  • :only-of-typeis used to select every <p> element that is the only <p> element of its parent

  • :nth-of-typeis used to select every <p> element that is the second <p> element of its parent

  • :nth-last-childis used to select every <p> element that is the second child of its parent, counting from the last child

  • :nth-last-of-typeis used to select every <p> element that is the second <p> element of its parent, counting from the last child



Syntax of Pseudo-Element

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

Example of Pseudo-Element

a::first-letter
{
color: blue;
}

All Pseudo-Elements

  • ::selectionis used to select the portion of an element that is selected by a user

  • ::first-letteris used to select the first letter of every <p> element

  • ::first-lineis used to select the first line of every <p> element

  • ::afteris used to insert content after every <p> element

  • ::beforeis used to insert content before every <p> element

❮ PrevNext ❯