Shulou(Shulou.com)06/02 Report--

CSS in the use of pseudo-classes, pseudo-elements and adjacent element selector skills, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

A few days ago, I came across a page request like this:

A comment box, the back button has two states of like or send comments, in which the send button can be divided into clickable and unclickable states according to whether there are words in the input box.

Demand:

No words, no focus-like

No text, focus-Gray send

There is text-sent in red

If you implement it in JS, you need to listen to the change and focus events of the input box, which is troublesome. But a similar effect can be achieved with pseudo-classes in CSS.

Send {display: none;} .input: focus ~ .send {display: block;} .input: valid ~ .send {display: block; color: red;} .input: focus ~ .like, .input: valid ~ .like {display: none;}

(if the comment box is implemented with the div element of the contenteditable attribute, you can use: empty pseudo-class instead of: valid.)

So there are a lot of pseudo-classes and pseudo-elements in CSS3, some of which, if used cleverly, can achieve a lot of effects that would otherwise require JS to achieve.

Placeholder of the div of the contenteditable attribute

For some reason, we sometimes use div with the contenteditable attribute instead of input or textarea as the input box. For example, div can automatically adjust the height according to the content. However, the div element does not support the placeholder attribute. How to display a default text when the div content is empty? You can take advantage of: empty pseudo-class.

.input: empty::before {content: attr (placeholder);}

Picture grid

This is seen on Meituan's mobile page:

We need to draw a grid in this area of the city list. Of course, the first thing we think of is to use the border attribute, but the designer has a requirement that if there is only one or two cities in a row, there should be a blank grid behind it for the sake of beauty. Like this:

How is the vertical line of the grid drawn in Meituan's page? It is drawn with:: after and:: before elements.

.table: before {content:'; position: absolute; width: 25%; left: 25%; height: 100%; border-left: 1px solid # ddd8ce; border-right: 1px solid # ddd8ce;} .table: after {content:'; position: absolute; width: 10%; left: 75%; height: 100%; border-left: 1px solid # ddd8ce; border-right: none;}

Two pseudo elements with a height of 100% are created, and their borders are used as the vertical lines of the table. This scheme can meet the requirements of designers without adding blank page elements and destroying semantics. But the limitation is that you can only draw a maximum of four vertical lines, that is, the table can have up to five columns.

Tab handoff

It is also possible to implement Tab switching with pure CSS. It mainly takes advantage of radio box elements: checked pseudo-classes and adjacent selectors. Because it is a single check box, it ensures that only one tab is active at a time. If more complex effects are not required, the tab switching effect of pure CSS is much simpler and more reliable than JS.

TAB1 TAB2 CONTENT1 CONTENT2input, .tab-content {display: none;} # tab1:checked ~ # content1, # tab2:checked ~ # content2 {display: block;}

In addition, using pseudo-classes of form elements, label elements can be used instead of form elements such as checkboxes and check boxes, because it is difficult to define styles for form elements themselves.

Perceiving the number of child elements

This is one of the most complex techniques I have ever seen, from this article, which does not rely on JS to apply different styles according to the number of child elements.

For example, CSS like:

.list li:nth-last-child (nasty 4) ~ li, .list li:nth-last-child (nasty 4): first-child {color: red}

You can achieve the effect that if the number of li elements in the .list is greater than or equal to 4, it is displayed in red.

How did this happen?

: nth-last-child (nail4) this selector means the fourth to last element and the previous element, followed by ~ li, which represents the li element after the element that meets the previous criteria.

If the total number of elements is less than 4, there will be no elements that match: nth-last-child (nasty 4) (there are no four, so there is no penultimate fourth), then li:nth-last-child (nasty 4) ~ li will not select any elements.

But if you only use ~ li, it won't match that li, so you add li:nth-last-child (nasty 4): first-child.

This makes it possible to apply different styles according to the number of elements.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.