How To Use Class Selectors to Differentiate Tag Instances?

Question

Selector 1:

#object h2::first-letter

Selector 2:

body .item div h2::first-letter:hover

Answer 1

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

.black {
  color: #000000; 
}

This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example:

h1.black {
  color: #000000; 
}

This rule renders the content in black for only

elements with class attribute set to black. You can apply more than one class selectors to given element. Consider the following example : <p class="center bold"> This para will be styled by the classes center and bold. </p>