Author: Chidume Nnamdi
Translator: Front Ash
Source: mediuum
Like it and look again , WeChat search [Daqian World] focuses on this person who has no background in a big factory, but has a positive attitude towards upwards. This article has been included on
GitHubhttps://github.com/qq449245884/xiaozhi , the article has been classified, and a lot of my documents and tutorial materials have been organized.
The css pseudo-class is used to add special effects to certain selectors. It is dynamic and refers to the state or characteristic of the current element. When only one element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style again.
This article encourages you to use simpler CSS and less JS when building your UI. Familiarity with everything CSS has to offer is one way to achieve this. Another way 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. I hope it will help you in the future.
::first-line | Select the first line of text
::first-linePseudo-elements apply 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 text size.
::first-linePseudo-element can, therefore, in the block container ::first-linedummy elements only a displayvalue of block, inline-block, table-cellor table-captionuseful. In other types, ::first-lineit does not work.
The usage is as follows:
p:first-line {
color: lightcoral;
}
::first-letter | Select the first letter of this line
CSS pseudo-element ::first-letteris selected by the first letter of the first row of a block-level element. The usage is as follows:
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
[External link image transfer failed, the source site may have an anti-leech link mechanism, it is recommended to save the image and upload it directly (img-w6k6WMPh-1600041556621)(/img/bVbGcxd)]
::selection| The part highlighted by the user
::selection Pseudo-elements are applied to the part of the document that is highlighted by the user (such as the part selected by the mouse or other selection device).
div::selection {
color: #409EFF;
}
[External link image transfer failed, the source site may have an anti-leech chain mechanism, it is recommended to save the image and upload it directly (img-thRau4Te-1600041556624)(/img/bVbGcxB)]
:root | Root element
:rootThe pseudo-class matches the root element of the document tree. As with HTML, :rootit represents <html>the element, in addition to a higher priority, the same as with the html selector.
When you declare a global CSS variables :rootcan be useful:
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | Only effective when the child is empty
:emptyPseudo-classes represent elements that have no child elements. Child elements can only be element nodes or text (including spaces), and comments or processing instructions will not have any effect.
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-K6jhj3Aw-1600041556626)(/img/bVbGcyh)]
Only the first and second divrole, because they are really empty, and the third divdoes not work, because it has a wrap.
:only-child | Only one child element is effective
:only-childDid not match any element of sibling elements. Equivalent selector can also be written :first-child:last-childor :nth-child(1):nth-last-child(1), of course, the former heavy weight will be lower.
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-T8tibz7t-1600041556629)(/img/bVbGcza)]
:first-of-type | Select the first child element of the specified type
:first-of-typeRepresents the first element of its type in a group of sibling elements.
.innerDiv p:first-of-type {
color: orangered;
}
The above represents the .innerDivfirst element of the pcolor to orange.
<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>
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-EQLB3DET-1600041556632)(/img/bVbGcCu)]
:last-of-type | Select the last child element of the specified type
:last-of-typeThe CSS pseudo-class represents the last element of a given type in the list of child elements (of its parent element). When the code-similar Parent tagName:last-of-typescope includes the last selected element among all child elements of the parent element, it also includes the last child element of the child element and so on.
.innerDiv p:last-of-type {
color: orangered;
}
The above represents .innerDivthe last element of the pcolor to orange.
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-1ijgcfGp-1600041556634)(/img/bVbGcDG)]
nth-of-type() | Select the child element of the specified type
:nth-of-type()The CSS pseudo class is set for a label having a sibling nodes, with nscreened position in 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>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-yp6Yoy10-1600041556635)(/img/bVbGcD2)]
:nth-last-of-type() | Select the child element of the type at the end of the list
:nth-last-of-type(an+b)The CSS pseudo-class matching those after which an+b-1the element of the same type of sibling nodes, wherein na positive value or zero value. It is basically :nth-of-typethe same, except that it counts in reverse order from the end, rather than from the beginning.
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}
This selects the last child element in the list innerDivof pelement types contained in the 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>
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-f0WXw5Ki-1600041556636)(/img/bVbGcE3)]
:link | Choose a hyperlink that is not visited
:linkPseudo-type selectors are used to select links among elements. It will select all links that have not been visited, including those that have been given other pseudo-type selectors (such as :hoverselectors, :activeselectors, :visitedselectors).
In order to correctly render the style of the link element, the :linkpseudo-class selector should be placed in front of the other pseudo-class selectors, and follow the LVHA order, namely: :link— :visited— :hover— :active. :focusPseudo-class selectors are often accompanied by :hover伪class selectors. You need to determine their order according to the effect you want to achieve.
a:link {
color: orangered;
}
<a href="/login">Login<a>
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-FkwtCvOl-1600041556636)(/img/bVbGcGq)]
:checked | Select a checked box
:checkedThe CSS pseudo-class selector represents the option HTML element ("option") in any radio ( <input type="radio">), checkbox ( <input type="checkbox">) or ("select") element that is in the selected state .
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
[External link image transfer failed, the source site may have an anti-leech link mechanism, it is recommended to save the image and upload it directly (img-nPxqy9P5-1600041556637)(/img/bVbGcGW)]
Everyone said that there was no project to write on the resume, so I helped you find a project and also included a [Building Tutorial] .
:valid | Choose a valid element
:validCSS pseudo-class represents verify correct content <input>or other <form>elements. This can simply display the check field as a style that allows the user to recognize the correctness of the input data.
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-S1TCttcs-1600041556638)(/img/bVbGcHS)]
:invalid | Select an invalid element
:invalidCSS pseudo class represented by any unverified content <input>or other <form>elements.
input[type="text"]:invalid {
border-color: red;
}
:lang()| langSelect an element by the specified value
:lang() CSS pseudo-classes match page elements based on 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()for a set of matched elements do not meet the selector. Since its role is to prevent specific elements from being selected, it is also called a negation pseudo-class.
Let's look at 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>
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-mmfg4Ont-1600041556639)(/img/bVbGcLt)]
Div 1And Div 2will be selected, pwill not be selected.
The talents' [Three Lian] is the biggest motivation for Xiaozhi to keep sharing. If there are any mistakes or suggestions in this blog, please leave a message. Finally, thank you for watching.
Original: https://blog.bitsrc.io/css-pseudo-selectors-you-never-existed-b5c0ddaa8116
The possible bugs after code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .
The article is continuously updated every week, you can search on WeChat [Daiqian World] to read it for the first time, reply [welfare] There are many front-end videos waiting for you, this article has been included on GitHub https://github.com/qq449245884/xiaozhi , welcome to Star .