Our volunteers haven't translated this article into 한국어 yet. Join us and help get the job done!
You can also read the article in English (US).

In this, the third in our series of articles on selectors, we discuss pseudo-selectors. These don't select elements, but rather certain parts of elements, or elements only in certain contexts. They come in two main types: pseudo-classes and pseudo-elements.

Pseudo-classes

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

We will not dig into every pseudo-class right now, it is not the objective of the Learning Area to teach you everything in exhaustive detail. You'll certainly come across some of these in more detail later, where appropriate.

A pseudo-class example

For now, let's just see a simple example of how to use these. First, an HTML snippet:

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

Then, some CSS rules:

/* These styles will style our link
   in all states */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

Now let's play with the link we just styled!

Active learning: A zebra striped info list

Your turn again. In this active learning segment, we'd like you to add some zebra striping to a list of info links, and appropriate pseudo-classes to style the links differently when they are hovered over. In this exercise, you'll only need to edit the last three rules. Some hints:

  1. You have already seen how to write the second pseudo class for the hover styles.
  2. For the zebra striping, you'll need to use a pseudo class like :nth-of-type(). This gives the two color rules a slightly different version of the pseudo class, to style the even and odd numbered list items. See if you can find how to do this!

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Pseudo-elements

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

They all have some very specific behaviors and interesting features, but digging into them all in detail is beyond our scope for now.

A pseudo-element example

Here we'll just show a simple CSS example that selects the space just after all absolute links and adds an arrow in that space:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

Let's add this CSS rule:

/* All elements with an attribute "href" with values
   starting with "http" will have an arrow added after their
   content (to indicate they are external links) */
[href^=http]::after {
  content: '⤴';
}

We get this result:

Active learning: A fancy paragraph

Next up for active learning, we have a fancy paragraph to style! All you have to do here is apply the two rulesets, to the paragraph's first line and first letter, using the ::first-line and ::first-letter pseudo elements. This should style the first line of the paragraph in bold, and the first letter as a nice drop cap, giving it an old-style feel.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Next up

We will round off our tour of CSS selectors, by looking at Combinators and multiple selectors.

 

In this module

 

문서 태그 및 공헌자

최종 변경: defilerc,