-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
  • 557
  • 2
  • 4
  • 20

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
  • 11,984
  • 7
  • 29
  • 50
1

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

Aplet123
  • 33,825
  • 1
  • 29
  • 55