Styling foundations · Lesson 3 of 17

Selectors and element states

Element relationships, hover and focus-visible.

8 minutes1 games

.card p selects descendant paragraphs; .card > p selects direct children only. [required] selects by attribute. Pseudo-classes such as :hover and :focus-visible select states; pseudo-elements such as ::before expose a stylable part.

HTML

<style>
  .card > p { color: navy; }
  button:hover { background: #bae6fd; }
  button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  .tag::before { content: "# "; }
</style>
<div class="card"><p class="tag">Python</p><button>Start</button></div>

Tool	Use
`A B`	Any matching descendant
`A > B`	Direct child
`:focus-visible`	Focus requiring a visible indicator
`::before`	Generated part before content

Exercise

Color the direct child paragraph green and leave the nested one black.

HTML

<style>p {color:black}</style>
<div class="card"><p>Direct</p><section><p>Nested</p></section></div>

Learn more from

Played 0 of 1 games

CSS

Styling foundations · Lesson 3 of 17

Selectors and element states

Element relationships, hover and focus-visible.

8 minutes1 games

HTML

<style>
  .card > p { color: navy; }
  button:hover { background: #bae6fd; }
  button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  .tag::before { content: "# "; }
</style>
<div class="card"><p class="tag">Python</p><button>Start</button></div>

Tool	Use
`A B`	Any matching descendant
`A > B`	Direct child
`:focus-visible`	Focus requiring a visible indicator
`::before`	Generated part before content

Exercise

Color the direct child paragraph green and leave the nested one black.

HTML

<style>p {color:black}</style>
<div class="card"><p>Direct</p><section><p>Nested</p></section></div>

Learn more from

Played 0 of 1 games