Login With Github

CSS Pseudo-classes

The CSS pseudo-class is mainly used to add a special state to the selector.You can use the CSS pseudo-class (without JavaScript) to implement some simple effects for HTML elements, such as hover animations.

Syntax

A simple syntax of pseudo-classes is as follows:

selector:pseudo-class {
    property: value;
}

CSS classes can also use pseudo-classes:

selector.class:pseudo-class {
    property: value;
}

The Anchor Pseudo-class

In the CSS Links chapter, you have learned that there are four states of the <a> element: link, visited, hover, and active.The style of these four states is defined by CSS pseudo-classes, for example:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:hover must be placed after a:link, a:visited and a:active must be placed after a:hover. The name of the pseudo-class is case-insensitive.

If you want to define several different sets of link effects in a page, you can use CSS classes and CSS pseudo-classes at the same time.For example, we can define a set of links whose initial colors are red and turn blue after be visited. At the same time, we define another set of links whose initial colors are green and turn yellow after be visited:

a.red:link {
    color: #FF0000;
}
a.red:visited {
    color: #0000FF;
}
a.blue:link {
    color: #00FF00;
}
a.blue:visited {
    color: #FF00FF;
}
<a class="red" href="#">this is first set of links</a>
<a class="blue" href="#">this is another set of links</a>

The :first-child Pseudo-class

The :first-child pseudo-class represents the first child of the parent element.

Example 1: Set the text color of the first <li> element to orange.

li:first-child {
    color: orange;
}
<ul>
    <li>This text will be orange.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

Example 2: Set the first <span> element in each <li> element to be orange and italic.

li > span:first-child {
    color: orange;
    font-style: italic;
}
<ul>
    <li>This <span>text</span> will be orange.</li>
    <li><span>Lorem</span> ipsum dolor <span>sit</span> amet.</li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

Example 3: Set all <span> elements in the first <li> element to be orange and italic.

li:first-child span {
    color: orange;
    font-style: italic;
}
<ul>
    <li>This <span>text</span> will be <span>orange</span>.</li>
    <li>Lorem ipsum dolor <span>sit</span> amet.</li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

Note: You must declare the <!DOCTYPE> statement in browsers prior to IE8 so that :first-child can take effect.

The :first-of-type Pseudo-class

The :first-of-type pseudo-class represents the first element of all element types in the parent container.

In the following example, the text color of the first <li> element and the first <span> element will be orange.

ul:first-of-type {
    color: orange;
}
<ul>
    <li>This tex will be orange.</li>
    <li>Lorem ipsum dolor <span>sit</span> amet.<span>This tex will be orange.</span></li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

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":

<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>

The :nth-child Pseudo-class

The :nth-child pseudo-class is one of the most flexible pseudo-classes in CSS. All of the :nth pseudo-classes have one parameter who has three types:

  • The Integer
  • The Formula an+b (both a and b are integers)
  • The odd or even keyword

Here we have a list of Greek words:

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

Example 1: Set the color of second word "Beta" to orange.

ol :nth-child(2) {
    color: orange;
}

Example 2: Set the colors of the 2nd, 4th, 6th, 8th ... words to orange.

ol :nth-child(2n) {
    color: orange;
}

Example 3: Set the colors of even-numbered words to orange.

ol :nth-child(even) {
    color: orange;
}

Example 4: Starting with the 6th child element, set the colors of the 6th, 8th, 10th, and 12th... words to orange.

ol :nth-child(2n+6) {
    color: orange;
}

The List Of All CSS Pseudo-classes

The following is a complete list of CSS pseudo-classes. You can click on the links to learn the usage of each CSS pseudo-class.(from w3schools)

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> 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 <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> 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

0 Comment

temp