CSS Pseudo

Pseudo Class

A pseudo-class is used to define a special state of an element. For instance, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

The syntax of pseudo-classes

selector:pseudo-class { property: value; }

Links can be displayed in different ways:

  • /* unvisited link */
  • /* visited link */
  • /* mouse over link */
  • /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

div class="hnote">

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

Hover on

An example of using the :hover pseudo-class on a <div>element: 

      
                    div:hover {background-color: blue; }

Simple Tooltip Hover

Hover over a

element to show a

element (like a tooltip): Hover over me to show the element. 

    •       
                    <style>
div {
    background-color:yellow;
}
p {display: none;   background-color: yellow;   padding: 20px; }  
div:hover p {display: block; }
</style>
<div>
<p>GOLDEN BEE</p>
<div>

    CSS - The :first-child Pseudo-class

    The :first-child pseudo-class matches a specified element that is the first child of another element. Match the first <i>

    CSS - The :lang Pseudo-class

    The :lang pseudo-class allows you to define special rules for different languages. In the example below, :lang defines the quotation marks for <q> elements with lang="no": <i> 

    •       
                    <html>
<head><style>
    q:lang(no) {   quotes: "~" "~"; }
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p>
</body>
</html>

    All CSS Pseudo Classes

    • :active a:active Selects the active link
    • :checked input:checked Selects every checked element
    • :disabled input:disabled Selects every disabled element
    • :empty p:empty Selects every

      element that has no children

    • :enabled input:enabled Selects every enabled element
    • :first-child p:first-child Selects every

      elements that is the first child of its parent

    • :first-of-type p:first-of-type Selects every

      element that is the first

      element of its parent

    • :focus input:focus Selects the element that has focus
    • :hover a:hover Selects links on mouse over
    • :in-range input:in-range Selects <input> elements with a value within a specified range
    • :invalid input:invalid Selects all elements with an invalid value
    • :lang(language) p:lang(it) Selects every

      element with a lang attribute value starting with "it"

    • :last-child p:last-child Selects every

      elements that is the last child of its parent

    • :last-of-type p:last-of-type Selects every

      element that is the last

      element of its parent

    • :link a:link Selects all unvisited links
    • :not(selector) :not(p) Selects every element that is not a

      element

    • :nth-child(n) p:nth-child(2) Selects every

      element that is the second child of its parent

    • :nth-last-child(n) p:nth-last-child(2) Selects every

      element that is the second child of its parent, counting from the last child

    • p:nth-last-of- type(2) Selects every

      element that is the second

      element of its parent, counting from the last child

    • :nth-of-type(n) p:nth-of-type(2) Selects every

      element that is the second

      element of its parent

    • :only-of-type p:only-of-type Selects every

      element that is the only

      element of its parent

    • :only-child p:only-child Selects every

      element that is the only child of its parent

    • :optional input:optional Selects elements with no "required" attribute
    • :out-of-range input:out-of- range Selects <nput> elements with a value outside a specified range
    • :read-only input:read-only Selects elements with a "readonly" attribute specified
    • :read-write input:read-write Selects elements with no "readonly" attribute
    • :required input:required Selects <input> elements with a "required" attribute specified
    • :root root Selects the document's root element
    • :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    • :valid input:valid Selects all <input> elements with a valid value
    • :visited a:visited Selects all visited links

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1