Pseudo-Classes

• Pseudo-Classes are predefined classes used to add special effects to the selectors, such as display the rows of a table in different background colors, changing the color of visited links etc.
• A pseudo-class always starts with a colon (:) symbol.
• Syntax: element: pseudo-class { property: value; }
• Pseudo-Classes can be categorized into following types:

Dynamic Pseudo-Classes

• Dynamic pseudo-classes provide various types of special effects to the ‘A’ element of HTML. These classes represent the state of links as unvisited, visited or currently selected.
• It also activates the HTML elements and applies special style to an element when the mouse pointer is kept over it.
  • :link – Apply styles to non-visited links. Eg. a:link
  • :visited –Apply styles to visited links. Eg.a:visited
  • :active – Apply styles to active element. Eg. a:active
  • :hover – Apply styles to an element over which the mouse pointer moves. Eg. a:hover
  • :focus – Apply styles to an element during the period it has user focus. Eg. a:focus:hover

Target Pseudo-Class

• Target pseudo-class is used to specify a target element. It includes only one class, that is :target.
• A web page containing Uniform Resource Identifier (URI) refers to a location within a resource. This URI ends with # followed by a number sign, which is also known as anchor or fragment identifier.
• The URI with fragment identifiers always link to a particular element within an HTML document and such a element is known as the target element.
• Consider URI with fragment identifier https://example.com/IP/abc.html#section_1A
• In above URI fragment identifier section_1A is related to a target element in the HTML document.
• If URI has no fragment identifier then the document has no target element.
• Example: *:target { color : yellow; } *:target::after { content : url (img.jpg); }
• In above example target pseudo class is used to make target element yellow and insert image after it.

Language Pseudo-Class

• It is used in HTML document that uses different languages.
• The :lang pseudo-class is used to specify a language to be used in a specific element. It includes only one class, that is :lang.
• Example: The :lang pseudo-class uses the angular brackets (<and>) for quoting purpose in the French language and in English language, it uses quotes (‘and’).

UI Element States Pseudo-Classes

• The UI element states pseudo-classes used to specify the appearance of UI elements, such as buttons, check-boxes etc.
• This classes are used to add particular style to an enabled or disabled button or checked, unchecked check-boxes.
  • :enabled – Represent an element of UI that is in the enabled state.
  • :disabled – Represent an element of UI that is in the disabled state.
  • :checked – Represents the selected states of radio and checkbox elements.
  • :indeterminate – Represents the undetermined states of radio and checkbox elements.
• Example: In following examples, the background color of an enabled text-box is set as orange and disabled text-box is set as light blue as well as a checkbox is displayed in violet border if it is in the selected state. Input [ type=”text” ] :enabled { background : orange; } Input [ type=”text” ] :disabled { background : lightblue; } Input :checked { border : 1px solid violet; }

Structural Pseudo-Classes

• Structural pseudo-classes allow the selection of elements on the basis of the structure of the entire HTML document, which includes the position of each element and number of times the occurrence of an element in the document.
• A browser treats HTML document as a tree of nodes, where the nodes are represented by elements and their child elements.
  • :root– Selects the root element of a document, that is nothing but always HTML element. Eg.:root { background : grey;}
  • :nth-child(N) – Selects the element on the basis of their position within the child elements of a parent element. It is applied only on those elements having a fixed number of child elements. Eg. p:nth-child(3) { color : red; }
  • :nth-last-child(N) – Selects the element just as the :nth-child(N) pseudo-class selects, but starts the counting from the last child and counts backward. Eg. tr:nth-last-child(2) { background : yellow; }
  • :nth-of-type(N) – Selects the element on the basis of their position as well as type within the child elements of a parent element. Eg.p:nth-of-type(3) { background : green; }
  • :nth-last-of-type(N) – Selects the element just as the :nth-of-type(N) pseudo-class selects, but starts the counting from the last child and counts backward. Eg. p:nth-last-of-type(2) { background : orange; }
  • :first-child – Selects the first child element of its parent element. Eg. p:first-child { background : pink; } it applies style on the all P element that are first child of their parent element
  • :last-child – Selects the last child element of its parent element. Eg. p:last-child { background : pink; } it applies style on the all P element that are last child of their parent element
  • :first-of-type – Selects the first child element of the specified element type. Eg.p:first-of-type { background : grey; } it applies style to the first child element of type P.
  • :last-of-type – Selects the last child element of the specified element type. Eg. p:last-of-type { background : grey; } it applies style to the last child element of type P.
  • :only-child – Selects an element if it is the only child element of its parent element. Eg.p:only-child { background : grey; } it applies style to every P element that has only one child element.
  • :only-of-type – Selects an element, which is the only child element of its parent element type. Eg.p:only-child { background : grey; } it applies style to every P element, which is only child element of its parent element type.
  • :empty – Selects the element that have no child elements. Eg. p:empty { background : grey; } it applies the style on every empty P element.

Negation Pseudo-Class

• The negation pseudo-class :not is used to select an element and negate the style that is applied to the element.
• Example: *:not(p) it negates the style applied on the P elements.

Pseudo-Elements

• Pseudo-elements used to apply style to a portion of a Web page. It apply style rules on sub-parts of element content.
• These elements are not a part of the standard markup of HTML because of this it is called as pseudo-elements, the special elements of CSS 3.
• According to CSS 3 specification, pseudo-elements always starts with a double colon (::) symbol.
• Syntax: selector :: pseudo-element { property : value; }
• Pseudo- Elements are divided into following types
  • ::first-line – Applies style to the first line in a block-level element like P and DIV. Eg.p::first-line { color: Brown; font-variant: small-caps; }
  • ::first-letter – Applies style to the first letter in a block-level element. Eg.p::first-letter { color: Brown; font-size: xx-large; }
  • ::before – Allow to insert some content before the content of an element. Eg. h1::before { content: url(image.gif); }
  • ::after – Allow to insert some content after the content of an element. Eg. h1::after { content: url(image.gif); }
  • ::selection – It matches the portion of an element that is selected by a user. color, background, cursor, and outline CSS properties can be applied with ::selection element. Eg. ::selection { color: brown; background: yellow; }