What are the new pseudo-class selectors in css3?

The new pseudo-class selectors are: 1. ":root", matching the root element of the document; 2. ":first-child", matching the first child element of the parent element; 3. ": last-child", matches the last child element of the parent element; 4. ":empty", matches empty elements; 5. ":target" and so on.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The role of pseudo-class selectors: further restrict existing selectors and further filter elements that can be matched by existing selectors. The pseudo-class selectors provided by CSS 3 are mainly divided into the following three categories:

• Structural pseudo-class selector
• UI element state pseudo-class selector
• Others Pseudo-class selector

1. Structural pseudo-class selector

• :root: matches the root element of the document . In an HTML document, the root element is always the element.
• :first-child: Matches elements that match the selector and must be the first child node of its parent element.
• :last-child: Matches elements that match the selector and must be the last child node of its parent element.
• :nth-child(n): Matches elements that match the selector and must be the nth child node of its parent element.
• :nth-last-child(n): Matches elements that match the selector and must be the nth child node from the bottom of its parent element.
• :only-child: Matches elements that match the selector and must be the only child node of its parent element.
• :first-of-type: matches the selector and is the first element among its sibling elements of the same type and level.
• :last-of-type: matches the selector and is the last element among its sibling elements of the same type and level.
• :nth-of-type(n): Matches the nth element that matches the selector and is the nth element among its sibling elements of the same type and level.
• :nth-last-of-type(n): matches the selector and is the nth element from the last among its sibling elements of the same type and level
• :only -of-type: matches the selector and is the only element among its sibling elements of the same type and level.
• :empty: Matches elements that match the selector and do not have any child elements (including text nodes) inside them.
• :lang(lang): Matches elements that match the selector and whose content is in a specific language.

For the two pseudo-class selectors: nth-child and :nth-last-child, the following usage is also supported.

　:nth-child(odd/event): Matches elements that match the selector and must be the odd/even child node of its parent element

　:nth-last-child( odd/event): Matches the element that matches the selector and must be the odd/even child node of its parent element

　:nth-child(xn y): Matches the selector and must be its parent element The element of the xn yth child node of the parent element

:nth-last-child(xn y): Matches the element that matches the selector and must be the xn yth child node of its parent element

An example of using the :nth-last-child pseudo-class selector is as follows:

    <meta>
    <meta>
    <title> child </title>
    <style>
        /* 定义对作为其父元素的倒数第3n 1个（1、4、7）子节点
            的li元素起作用的CSS样式 */
        li:nth-last-child(3n+1) {
           background-color: #FFC0CB;
        }
    </style>

    
• Java
    
• 轻量级Java EE
    
• Ajax
    
• XML
    
• 经典Java EE
    
• Android

The effect is as follows:

2. UI element status pseudo-class selector

UI element status pseudo-class selector includes:

• :enabled : Matches all elements in the available state in the user interface (form form)

• : disabled: Matches all elements in the disabled state in the user interface (form form)

• :checked: Matches all selected elements in the user interface (form form)

• ::selection (there are two colons in front of the selector): Match the part of the element that is selected or highlighted by the user

3. Other pseudo-class selectors

3.1: Target pseudo-class selector (matches elements that match the selector and must be the target of a named anchor)

It is required that the element must be the target of the named anchor and must be currently being accessed The goal. Its purpose is that the page can highlight the target being visited through this selector. The following demonstrates the usage of the target selector (the code is the sample code in "Crazy HTML 5 CSS 3 JavaScript Handouts")

	<meta>
	<title> :target </title>
	<style>
		:target {
			background-color: #ff0;
		}
	</style>


	<p>
		<a>疯狂Java讲义</a> |
		<a>轻量级Java EE企业应用实战</a> |
		<a>疯狂Android讲义</a> |
		<a>经典Java EE企业应用实战</a>
	</p>
	<div>
		<h2 id="疯狂Java讲义">疯狂Java讲义</h2>
		<p>本书详细介绍了Java语言各方面的内容。</p>
	</div>
	<div>
		<h2 id="轻量级Java-EE企业应用实战">轻量级Java EE企业应用实战</h2>
		<p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p>
	</div>
	<div>
		<h2 id="疯狂Android讲义">疯狂Android讲义</h2>
		<p>本书详细介绍了Android应用开发的知识。</p>
	</div>
	<div>
		<h2 id="经典Java-EE企业应用实战">经典Java EE企业应用实战</h2>
		<p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p>
	</div>

3.2: not pseudo Class selector (matching elements that match selector 1 but not selector 2, equivalent to subtracting 2 from 1)

The code on the following page demonstrates the use of the :not selector:

	<meta>
	<title> :not </title>
	<style>
		li:not(#ajax) {
			color: #999;
			font-weight: bold;
		}
	</style>


	

• 疯狂Java讲义
• 轻量级Java EE企业应用实战
• 疯狂Ajax讲义
• 疯狂XML讲义
• 疯狂Android讲义

As you can see from the running results, except for the font of all

elements with the ID of ajax, they are set to the color represented by #999, and the font Shown in bold.

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What are the new pseudo-class selectors in css3?. For more information, please follow other related articles on the PHP Chinese website!