Print this chapterPrint this chapter

Getting Started with CSS Rules

Combining selectors and combinators

It is worth noting that you can combine multiple selectors and combinators together. For example:

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1
    + ul + p { ... }

You can combine multiple types together, too. Try adding the following into your code:

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

This will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. Phew!

In the original HTML we provided, the only element styled is <span class="special">.

Don't worry if this seems complicated at the moment – you'll soon start to get the hang of it as you write more CSS.