-4

Which of the following two selectors has a higher CSS specificity?

Selector 1 -> #object h2::first-letter

Selector 2 -> body .item div h2::first-letter:hover

My Answer is Selector 1, I calculated 111 for that. Selector 2 gave me a specificity of 6.

Am I right?

blazing
  • 455
  • 1
  • 4
  • 16

2 Answers2

1

You can't hover over a ::first-letter, however, all things being equal, the first selector is stronger:

/* Selector 1 -> #object h2::first-letter */
#this h2::first-letter{
   color: red
}

/* Selector 2 -> body .item div h2::first-letter:hover */
body .item div h2::first-letter{
   color: blue;
}
<div class="item">
  <div id="this">
    <h2>This is a title</h2>
  </div>
</div>
symlink
  • 10,400
  • 6
  • 25
  • 47
1

The first one has a higher specificity since it actually contains an ID, which takes precedence over almost everything else.

Aplet123
  • 27,379
  • 1
  • 13
  • 35