Author: Chidume Nnamdi
Translator: Front-end Xiaozhi
Source: mediuum
If you have dreams and dry goods, search [Moving the World] attention to this brush bowl wisdom who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.
CSS pseudo-classes are used to add special effects to certain selectors. They are dynamic and refer to the state or characteristics of the current element. When only one element reaches a particular state, it may get the style of a pseudo-class; when the state changes, it loses the style again.
This article partly encourages you to use simpler CSS and less JS when building your UI. Getting familiar with everything CSS has to offer is one way to do this, another is to implement best practices and reuse as much code as possible.
Next, I will introduce some pseudo-classes and their use cases that you may not be familiar with, hoping to help you in the future.
::first-line | Select the first line of text
::first-line pseudo-element applies styles to the first line of a block-level element. The length of the first line depends on many factors, including element width, document width, and the text size of the text.
::first-line pseudo-element can only be used in block containers, so the ::first-line pseudo-element can only be useful in a display value of block , inline-block , table-cell or table-caption . In other types, ::first-line no effect.
The usage is as follows:
p:first-line {
color: lightcoral;
}::first-letter | Select the first letter of the line
The CSS pseudo-element ::first-letter selects the first letter of the first line of a block-level element. The usage is as follows:
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
::selection | The part highlighted by the user
::selection pseudo-element is applied to parts of the document that are highlighted by the user (such as those selected with a mouse or other selection device).
div::selection {
color: #409EFF;
}
:root | root element
:root pseudo-class matches the root element of the document tree. For HTML, :root means <html> element, which is the same as the html selector except that it has a higher priority.
:root can be useful when declaring global CSS variables:
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}:empty | only works if subkey is empty
:empty pseudo-class represents an element with no child elements. Child elements can only be element nodes or text (including spaces), and comments or processing instructions have no effect.
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
Only the first and second div work because they are indeed empty, the third div has no effect because it has a newline.
:only-child | Only one child element works
:only-child matches elements without any siblings. The equivalent selector can also be written as :first-child:last-child or :nth-child(1):nth-last-child(1) , of course, the former will have a lower weight.
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>
:first-of-type | Selects the first child element of the specified type
:first-of-type represents the first element of its type in a group of sibling elements.
.innerDiv p:first-of-type {
color: orangered;
}The above means that the color of the first element in .innerDiv is set to orange as p .
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .
:last-of-type | Selects the last child element of the specified type
:last-of-type CSS pseudo-class represents the last element of a given type in a list of child elements (of its parent). When the code is like Parent tagName:last-of-type , the scope includes the last selected element of all the child elements of the parent element, the last child element of the child element, and so on.
.innerDiv p:last-of-type {
color: orangered;
}The above means that the last element in .innerDiv is set to orange with the color of p .
nth-of-type() | Selects child elements of a specified type
The CSS pseudo-class :nth-of-type() is for tags with a set of sibling nodes, and n is used to filter out the position of a set of sibling nodes.
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
:nth-last-of-type() | Select child element of type at end of list
The CSS pseudo-class :nth-last-of-type(an+b) matches elements that follow it with an+b-1 of the same type, where n is a positive or zero value. It's basically the same as :nth-of-type , except it counts backwards from the end instead of the beginning.
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}This selects the last child element in the list of elements of type p contained in the innerDiv element.
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
:link | Select an unvisited hyperlink
:link pseudo-class selector is used to select links among elements. It will select all unvisited links, including those for which other pseudo-class selectors have been given (eg :hover selector, :active selector, :visited selector).
In order to render the styles of linked elements correctly, the :link pseudo-class selector should be placed before other pseudo-class selectors, in the LVHA order, ie: :link — :visited — :hover — :active . :focus pseudo-class selector is often accompanied by the :hover pseudo-class selector, and you need to determine their order according to the effect you want to achieve.
a:link {
color: orangered;
}
<a href="/login">Login<a>
:checked | Select a checked checkbox
:checked the CSS pseudo class selector in the selected state represents any Radio ( <input type="radio"> ), CheckBox ( <input type="checkbox"> ) or ( "select") elements Option the HTML elements ( "option").
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .
:valid | Select a valid element
:valid CSS pseudo-class represents a <input> or other <form> element with correct content validation. This simply presents the validation field in a style that allows the user to identify the correctness of their input data.
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
:invalid | Select an invalid element
:invalid CSS pseudo-class represents any <input> or other <form> element whose content fails validation.
input[type="text"]:invalid {
border-color: red;
}:lang() | Selects an element by the specified value of lang
:lang() CSS pseudo-class to match page elements based on the element language.
/* 选取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}:not() | Used to match elements that do not match a set of selectors
CSS pseudo-class :not() used to match elements that do not match a set of selectors. Since its role is to prevent specific elements from being selected, it is also known as the negation pseudo-class.
Let's see an example:
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
Div 1 and Div 2 will be selected, p will not be selected.
Original: https://blog.bitsrc.io/css-pseudo-selectors-you-never-existed-b5c0ddaa8116
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .
communicate with
If you have dreams and dry goods, search [Big Move to the World] attention to this Shawanzhi who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。