• A Little Reminder That Pseudo Elements are Children Kinda.
  • Originally by Chris Coyier
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Badd
  • Proofreader: LGH757079506, Moonliujk

Tip: Pseudo-elements are child elements.

Consider the following code, a container with several child elements:

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>
Copy the code

If I write it like this:

.container::before {
  content: "x"
}
Copy the code

Essentially equivalent to:

<div class="container">[[[insert ::before pseudo-element]]]<div>item</div>
  <div>item</div>
  <div>item</div>
</div>
Copy the code

The pseudo-element is roughly like a child element. The tricky part is that no selector can select it except ::before, the selector that created the pseudo-element (or a similar selector that ends with a ::before or ::after in the same place).

For example, suppose I set up the container as a 2×3 grid and set each child element to a tablet grid style:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5 rem;
}

.container > * {
  background: darkgray;
  border-radius: 4px;
  padding: 0.5 rem;
}
Copy the code

When no pseudo-elements are used, it looks like this:

If I add the pseudo-element selector above, I get something like this:

That makes sense, but it can also be a pit. Pseudo-elements are often used as decorative elements (they should be used almost exclusively as decorative elements), so planning them into a grid layout would be weird.

Note that the selector. Container > * does not select the fake element and fails to make its background color darkgray because it will not hit the fake element with this gun. This is another trick of the pseudo-element.

In daily development, I find that the use of pseudo-elements is often to achieve some decorative effect through absolute positioning — so if you’ve ever written code like:

.container::before {
  content: "";
  position: absolute;
  /* Some decorative effects */
}
Copy the code

You might not even notice that you added an element. Technically, a pseudo-element is a child, so it does what a child does, but participating in a grid layout is not one of its obligations. CSS grid layouts are not alone. For example, you’ll find that when you apply a Flex layout, the pseudo-elements become children of the Flex layout. You can also float pseudo-elements as you like, or use other layouts.

It is clear from the debugger that the pseudo-element behaves as a child element in the DOM:

There are more secret ways!

One of them is :nth-child(). You would think that since the pseudo-elements are real children, they would be evaluated by :nth-child(), but they are not. That is, operations like this:

.container > :nth-child(2) {
  background: red;
}
Copy the code

The same element will be selected, regardless of whether there is a pseudo-element ::before. The same is true for ::after and :nth-last-child. That’s why I added “ba” to the title. If the pseudo-elements are real children, they should be able to interfere with the selector’s hit.

As a bonus, in JavaScript you can’t select a pseudo-element the way you can select a regular child element. document.querySelector(“.container::before”); Will return NULL. If you want to get pseudo-elements in JavaScript because you want to get their style, you can do this with a little CSSOM magic:

const styles = window.getComputedStyle(
  document.querySelector('.container'),
  '::before'
);
console.log(styles.content); // "x"
console.log(styles.color); // rgb(255, 0, 0)
console.log(styles.getPropertyValue('color'); // rgb(255, 0, 0)
Copy the code

Have you fallen for those little tricks of the false element?

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.