Here goes your text ... Select any part of your text to access the formatting toolbar.
<style>
h1.my-heading {
  color: crimson;
}
</style>

<h1 class='my-heading'>Just some custom HTML</h1>
Here goes your text ... Select any part of your text to access the formatting toolbar.
I am a button

Psedo classes for conditions

Here goes your text ... Select any part of your text to access the formatting toolbar.

:nth-child() vs :nth-of-type()

Here goes your text ... Select any part of your text to access the formatting toolbar.

Count from last

Here goes your text ... Select any part of your text to access the formatting toolbar.

Nth family is also programmatic

Here goes your text ... Select any part of your text to access the formatting toolbar.

Combine selections

Here goes your text ... Select any part of your text to access the formatting toolbar.

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
Here goes your text ... Select any part of your text to access the formatting toolbar.
  • 漢字かんじが混まざっている文章ぶんしょう
  • Kanji ga mazateiru bunshou
  • Frasi con kanji misti
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav

Alternatively, you can select items that match a specific selecter or context using :is()

Here goes your text ... Select any part of your text to access the formatting toolbar.
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav

You can do exact the same thing with :where(), but :where() pseudo class resets the specificy of the styles to zero...

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav
  • List item in nav

And then there is :has(), one of the most powerful pseudo classes created...

Here goes your text ... Select any part of your text to access the formatting toolbar.

Don't forget accessibility with :focus and :focus-within

Here goes your text ... Select any part of your text to access the formatting toolbar.

This is just a placeholder

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet.

Call to action

:empty()

Here goes your text ... Select any part of your text to access the formatting toolbar.

Not Empty

Not Empty

Not Empty

Here goes your text ... Select any part of your text to access the formatting toolbar.

Other pseudo classes

  • :active
  • :visited
  • :enabled
  • :disabled
  • :valid
  • :invalid
  • :root
  • some form related
  • and more…