As we all know, in THE CSS3 specification, added many pseudo-class selectors, these selectors replace a lot of JS work, let us from the previous by obtaining DOM node and then style modification operation, become more convenient and efficient.

However, IN the recent development and use of the process, I encountered a lot of pits, the fact that it is necessary to carefully read the document, so here to share a few problems I encountered, through a demand to do several pairs of selector parsing, I hope to help you.

Requirement: Find the first or last element of a class name on the page.

:first-child / :last-child

Description in CSS3 manual:

  • :first-child: Selects each child that belongs to the first child of its parent
  • :last-child: Selects each child of the last child of its parent element

This description can be a bit confusing, so let’s go straight to an example:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8"> <style> p:first-child { border: 1px solid red; } p:last-child { border: 1px solid blue; } </style> </head> <body> <div> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <p> This is paragraph three. </p> </div> <div> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <p> This is paragraph three. </p> </div> </body> </html>Copy the code

Results:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .p:first-child {
      border: 1px solid red;
    }
    .p:last-child {
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div>
    <p class="p"This is the first paragraph. </p> <p class="p"This is the second paragraph. </p> <p class="p"This is the third paragraph. </p> </div> <div> <p> This is an interference paragraph. </p> <p class="p"This is the first paragraph. </p> <p class="p"This is the second paragraph. </p> <p class="p"This is the third paragraph. </p> <p> This is an interference paragraph. </p> </div> </body> </html>Copy the code

Results:

  • The element belongs to the class name
  • This element is the first or last child of its parent

:first-of-type / :last-of-type

With a closer look at the above two selectors, take a look at this pair.

Description in CSS3 manual:

  • :first-of-type: selects each child of the first child element of a specified type that belongs to its parent element
  • :last-of-type: selects each child of the last child element of the specified type that belongs to its parent element

Here’s an example:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8"> <style> p:first-of-type { border: 1px solid red; } p:last-of-type { border: 1px solid blue; } </style> </head> <body> <div> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <p> This is paragraph three. </p> </div> <div> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <p> This is paragraph three. </p> </div> </body> </html>Copy the code

Results:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8"> <style> .p:first-of-type { border: 1px solid red; } .p:last-of-type { border: 1px solid blue; } </style> </head> <body> <div> <div> this is an interference paragraph. </div> <p class="p"This is the first paragraph. </p> <p class="p"This is the second paragraph. </p> <p class="p"This is the third paragraph. </p> <div> This is an interference paragraph. </div> <div> <p> This is an interference paragraph. </p> <p class="p"This is the first paragraph. </p> <p class="p"This is the second paragraph. </p> <p class="p"This is the third paragraph. </p> <p> This is an interference paragraph. </p> </div> </body> </html>Copy the code

Results:

  • Finds the label type of the element of the specified type
  • Looks for matches under its parent elementThe tag typeThe elements of the
  • If and only if the element matches the type specified in the selector and is of the same class as the parent elementThe labelIs the first or last child of the

:nth-child(n) / :nth-last-child(n)

Description in CSS3 manual:

  • :nth-child(n) : Selects the NTH child of its parent, regardless of the element type
  • : nth-last-Child (n) : Selects the NTH to last child of its parent, regardless of the element type

When n is 1, the implementation result is the same as that of :first-child / :last-child, so simply setting n to 1 does not help us solve our needs. Then you must ask why we introduce this pair of selectors.

In fact by the above two groups selector, we also found that when our application scenario is a multiple child elements of the same tag type container, choose one of them should be the first or the last element is a very difficult thing, but if we know we want to how many of the same label element before and after class, we can use a method of settling, Consider the following example.

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8"> <style> .p:nth-child(2) { border: 1px solid red; } .p:nth-last-child(2) { border: 1px solid blue; } </style> </head> <body> <div> <p> this is an interference paragraph. </p> <p class="p"This is the first paragraph. </p> <p class="p"This is the second paragraph. </p> <p class="p"This is the third paragraph. </p> <p> This is an interference paragraph. </p> </div> </body> </html>Copy the code

Results:

conclusion

To conclude, when solving this requirement, we actually encountered several different scenarios for which we needed to use different selectors.

  • When the parent element has only the specified type: use :first-child / :last-child
  • When there are other tag elements under the parent element besides the specified type: use :first-of-type / :last-of-type
  • Nth-child (n) / : nth-last-Child (n) or :nth-of-type(n) / :nth-last-of type(n) / :nth-last-of type(n)

From the above, we also see that there is a scenario, that is, when the parent element in addition to the specified type (a class name), there are other tags of the same kind, the number of other tags is unknown, this scenario, I can not think of a good way to use CSS to find him, welcome you to add.

Although this is only a small part of CSS3, but to learn knowledge not only to pursue breadth, but also to pursue depth, and we encourage each other.