Home > Developer > Web Develop
As the front-end personnel, every day to deal with fullscreen tags, elements, through the combination of elements and styles, showing a beautiful and elegant pages, including CSS Pseudo-class and pseudo-elements of the application, with the development of the front-end, developers use more and more integration technology, make our work faster and more efficient high-force lattice, The following is to organize the application of pseudo-class and pseudo-elements in CSS;
CSS pseudo-class:
What is a CSS pseudo-class (pseudo-class), Pseudo-class is to define the existence of a special state of the elements, this particular state at first thought is what high-tech gadgets, but in fact very good understanding, such as a input box, the default is enable& Unchecked, if it is disabled is checked, it becomes a special state, OK, give the most understandable is also the official case to see:
| 12345678910111213141516171819 | |
As shown in the example, you can define a corresponding pseudo-element for an element and only take effect when you are in a defined state, and when you debug the style of a pseudo-element, you can use the console to regulate the state of the element:
and pseudo-classes can be used in conjunction with classes:
| 123 | a.highlight:hover { color: #ff0000;} |
There is a more special pseudo-element Lang, which seems to use less often, is to define the style by defining different Lang types:
| 123456789101112131415 | |
is the following effect:
Of course, CSS pseudo-elements more than these, the writing is also various, but generally used only the first few, the following is the collation of the CSS pseudo-class;
CSS pseudo-class collection:
| Pseudo class | Example | Description |
|---|---|---|
| : Active | a:active | Checked status |
| : Checked | input:checked | Tick status |
| :d isabled | input:disabled | Disabled state |
| : Empty | p:empty | P element No child element |
| : Enabled | input:enabled | Activation status |
| : First-child | p:first-child | The first P-element under a parent |
| : First-of-type | p:first-of-type | The first P-type element under a parent |
| : Focus | input:focus | selected, the cursor is in the current |
| : hover | a:hover | Hover status |
| : In-range | input:in-range | Input that defines a value within a range |
| : invalid | input:invalid | All elements that match the validation criteria |
| : lang (language) | p:lang(it) | The P defined by Lang (it) |
| : Last-child | p:last-child | The last P-element under the parent |
| : Last-of-type | p:last-of-type | The last P-type element under the parent |
| : Link | a:link | Non-visited links |
| : Not (selector) | :not(p) | Non-P element |
| : Nth-child (N) | p:nth-child(2) | Nth P-Element under Parent |
| : Nth-last-child (N) | p:nth-last-child(2) | Second-to-last element under a parent |
| : Nth-last-of-type (N) | p:nth-last-of-type(2) | The second P element of the parent, calculated from the last child element |
| : Nth-of-type (N) | p:nth-of-type(2) | The second child element of its parent |
| : Only-of-type | p:only-of-type | When P is the only element type of its parent |
| : Only-child | p:only-child | When P is the only element of its parent |
| : Optional | input:optional | No "required" marked with input |
| : Out-of-range | input:out-of-range | Input not in a specific range of values |
| : read-only | input:read-only | Input with "ReadOnly" designation |
| : Read-write | input:read-write | No input with "readonly" marked |
| : Required | input:required | Input with "required" designation |
| : Root | root | Page root element |
| : Target | #news:target | Select an element anchor point |
| : Valid | input:valid | Validation-compliant elements |
| : Visited | a:visited | Visited by |
In fact, it is quite a lot of ha, but it is commonly used in general development of only a few, anyway I was useless, can achieve the desired development effect on the line, do not have to force the pursuit of, and sometimes can also cooperate with jquery CSS operation, the wording is also very simple;
Next look at the pseudo-element (pseudo-element), after understanding the definition of pseudo-class, it is better to understand the pseudo-element, CSS pseudo-element is the definition of the element "part" of the special style, such as defining the first character of the element, the first line, the element in the before, After, center defines the following syntax:
| 123 | selector::pseudo-element { property:value;} |
For example, define the first line of a P:
| 123 | p::first-line { color: #ff0000;} |
Insert part of the content before or after an element:
| 123 | i::before { content: url(pic.gif);} |
This approach often works with font icons appearing in Web pages, with an element as the carrier, and the font icon added to the element area display:
On-line Instance page
Pseudo-elements are not many but widely used, the meaning of understanding, examples are as follows:
| pseudo Element | Example | Description |
|---|---|---|
| :: After | p::after | Insert content after P element |
| :: Before | p::before | Insert content before P element |
| :: First-letter | p::first-letter | The first character in a P element |
| :: First-line | p::first-line | First line |
| :: Selection | p::selection | User selected Area |
Original address: http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/
CSS pseudo-classes and pseudo-elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
