Combinators

Combinators combine things. Like p’s that follow a heading.

Pseudo-elements create elements that don’t exist in the markup OR can add content to an element at the beginning or end.

Combinators

There are four types: descendent, child, adjacent, general adjacent.

1. This descendent combinator will target all child paragraphs of section elements:

   section p {color: red}

2. A child combinator is more precise and only targets immediate child paragraphs of <section>:

   section > p {color: orange;}

3. This adjacent combinator targets the paragraph immediately after to an h3 heading (ie. w same parent).

   NB. "adjacent" means "immediately following".

   This could be useful for changing spacing between the two elements for example.

   h3 + p {color: fuchsia;}

   An h3 Heading

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos.

   In minus, eius et sequi necessitatibus, dolorum doloribus nam.

   Corporis libero, minima voluptatum illo rem. Asperiores minus, nobis!

   This is a div

   A fourth paragraph

4. The general adjacent targets all paragraphs that share the same parent as the h4 heading. (The symbol, a tilde, is not even avaialable on some keyboards, eg laptops. The ASCII alt code is: 126. Voilà ~)

   h3 ~ p {color: orange;} targets all the paragraphs after the h4 heading.

   Paragraph before

   An h3 Heading

   The first paragraph. Lorem ipsum dolor sit amet.

   Second paragraph. Lorem ipsum dolor sit amet.

   Third paragraph. Lorem ipsum dolor sit amet.

   This is a div. Lorem ipsum dolor sit amet.

   A fourth paragraph. Lorem ipsum dolor sit amet.

   h4 heading

   Another paragraph. Still orange....

Pseudo elements

There are 5, marked by double colons:

• ::before—adds content at the start of an element
• ::after—adds content at the end of an element
• ::first-letter—styles the first letter of an element.
• ::first-line—the first line (obviously).
• ::selection—when the user selects text on a page you can choose the colour.

There a ton of stuff one can do with these. See CSS Tricks article for lots of possibilities.

The final paragraph (in red) was styled using the following mix of pseudo-classes and pseudo-elements.

#pseudo-classes > p:last-of-type {
  margin-top: 4em;
  margin-bottom: 3em;
  font-weight:bold;
  font-size: 1.2em;
  color: red;
}

#pseudo-classes > p:last-of-type::before {
  content: "!! -"
}

Pseudo classes

Allow multiple, contradictory classes to be assigned to single elements.

a:link, a:hover, a:visited etc.

Attribute selectors

You can select an element based on the value of it’s HTML attribute. For instance let’s say you have an anchor element: <a href="#">Link</a>.

Complete

To select that particular anchor element the CSS is simply a[href="#"]

Partial

If there are several links you want based on similar urls for example you use a star: a[href*="photo"] will select all anchor elements that have photo somewhere in the url.

Before

Similar but using the ^ instead of a star: a[href^="http"]. The ^ symbol denotes the beginning of the string. In this example you could use it to target all external links from a site.

Similar again using the dollar sign: a[href$=".svg"]. This is targetting the end of the string and could be used to target svg image links.

In a list of links or a menu you can target the one or ones that have a # as the value for the href attribute. In the CSS you can make it blue…

a[href="#"] {
  color: blue;
}