CSS but with Bridgerton Characters

A few CSS selectors explained, but with Bridgerton characters. Possible spoilers!

Everything Selector

Selects every element.
Syntax: *
Example:

* {
  color:white;
  font-size:48px;
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

Element Selector

Selects every one of the specified elements.
Syntax: div
Example:

div{
 border: 1px solid red;
  border-radius:5px;
}

Class Selector

Select every element with the specified class.
Syntax: .class
Example:

.the-ton {
  color:red;
}

Double Class Selector

Select every element with both specified classes
Syntax: .first-class.second-class
Example:

.the-ton.bridge-brothers {
  color: blue;
}

Multiple Class Selector

Selects every element with the second specified class, that is a child of an element with the first specified class.
Syntax: .first-class .second-class
Example:

.the-ton .secret {
  font-size:30px; color:green;
}

ID Selector

Selects the one element with the specified id. There should be only one.
Syntax: #id
Example:

#queen{
  color: purple;font-size:68px;
}

First Child

Selects the element that is the first child of its parent element.
Syntax: element:first-child
Example:

#characters div:first-child{
  color:green;
}

The more you use these, and other CSS selectors, the more they will become second-hand. Do try not to bungle it up.