6.4 Intermediate

Now, we introduce selectors corresponding to the state, part or attribute of an HTML element.

Pseudo-class

  • The pseudo-class (:) specifies a special state of the selected elements.

  • Examples:

li:hover {
  color: peru;
}

li:active {
  font-size: 200%;
}

li:first-child {
  text-decoration: underline;
}

li:not(:first-child) {
  color: red;
}

Pseudo-element

  • The pseudo-element (::) specifies a part to modify of the selected element.

  • Examples:

p::before {
  content: "random words: ";
}

p::first-letter {
  text-transform: uppercase;
}

p::after {
  content: "blah blah blah blah";
}
  • Eye-catching application of the ::before and ::after pseudo-elements.

Attributes

  • Attributes are aditional values that configure or adjust the behaviour of HTML elements.

  • Examples:

div[data-nChildren="3"] {
  border: 5px solid rgb(200, 100, 50, 0.5);
  border-radius: 30px;
}

textarea[rows="5"] {
  background-image: linear-gradient(
    to right, crimson, skyblue
  );
}

em[contenteditable="true"] {
  opacity: 0.5;
}