Some techniques for using pseudo-classes, pseudo-elements, and neighboring element selectors in CSS

The first few days of encountering a page demand is this:

A comment box, after the button is a bit like or send comments two states, where the Send button is based on whether there are words in the input box can be clicked and not clickable two states.

Demand:
No text, no spotlight--Likes
No text, focus--gray send
With text--Red send

If you use JS implementation, you need to listen to the input box change and focus events, more trouble. But using the pseudo-class in CSS can achieve similar effects.

<input type= "text" class= "input" Required><div class= "like" > Likes </div><div class= "send" > Send </div>

. 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: valid. ）

So the pseudo-class and pseudo-elements in the CSS3 are very many, some of which, if used skillfully, can achieve a lot of the original need JS can achieve the effect.

contenteditable attributes of the DIV's placeholder

For a number of reasons, we sometimes use a div with the contenteditable attribute instead of input or textarea as the entry box. For example, div can automatically adjust height based on content. However, the DIV element does not support the placeholder property. How to display a default text when the div content is empty? Can be exploited: empty pseudo class.

  <div class= "Input" contenteditable placeholder= "Please enter text" ></div>

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

Picture lattice

This is seen on the mobile page of the American Regiment:

We need to draw a grid in this area of the city list. The first thing we thought about was using the border property, but the designer had a request that if the last line had only one or two cities, there would be blank squares for the sake of beauty. Look like this:

How do you draw the vertical line of the grid on the American Regiment page? is used with:: After and:: Before elements are drawn.

. 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% were created, using their borders as vertical bars of the table. This scheme can realize the designers ' requirements without adding blank page elements and destroying semantics. But the limitation is that you can draw up to four vertical lines, which means that the table has a maximum of 5 columns.

TAB Toggle

A plain CSS implementation is also possible with TAB switching. The main use of the single box element: checked pseudo-class and adjacent selectors. Because it is a radio box, it is guaranteed that only one tab is active at the same time. If you do not require more complex effects, so the plain CSS implementation of the tab switching effect is much simpler and more reliable than JS.

  <input id= "TAB1" type= "Radio" name= "tabs" checked>  <label for= "Tab1" >TAB1</label>  < Input id= "TAB2" type= "Radio" name= "tabs" >  <label for= "tab2" >TAB2</label>  <div id= " Content1 "class=" tab-content ">CONTENT1<div>    <div id=" Content2 "class=" Tab-content ">content2 </div>

  Input,. tab-content{    display:none;  }  #tab1: Checked ~ #content1,  #tab2: Checked ~ #content2 {    display:block;  }

In addition to the pseudo-class of form elements, you can label elements instead of the form elements themselves, such as a radio box, a check box, because it is difficult to define a style for the form element itself.

Number of perceptual child elements

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

For example, CSS like this:

. List Li:nth-last-child (n+4) ~ li,.list li:nth-last-child (n+4): first-child {  color:red}

You can achieve this effect: if the number of LI elements in the. List is greater than or equal to 4, it is displayed in red.

How is this going to be achieved?

: Nth-last-child (n+4) This selector means that the last fourth and previous elements, followed by the ~ Li, is the LI element that represents the element that meets the preceding criteria.

If the total number of elements is less than 4, there will be no element conforming to: Nth-last-child (n+4) (there is no four, there is no bottom fourth), then Li:nth-last-child (n+4) ~ Li will not select any element.

But if only with ~ Li, is not matched to the first Li, so added Li:nth-last-child (n+4): First-child.

This also enables different styles to be applied depending on the number of elements.

