-1

Im want to know the best semantic for an element that already have a class and then change the style with the pseudo-class.

The case is for an "a" element.

a.btn {...}

a:hover.btn {...} or a.btn:hover {...}

Wich one is the best practice?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Samuel Lamim de Carvalho
  • 31
  • 1
  • 7

1 Answers1

-1

Bearing in mind selectors resolve right to left, you should use a.btn:hover simply for the fact it is (should always be) the case only a single item is hovered at a time, making the selector most efficient in initial identification. Once the hovered item is selected, it is checked whether it has the class btn then is an a. If all btn elements are a, you could simply to .btn:hover for greater efficiency.

By doing a:hover.btn the selector is identifying all elements with the class btn first, then finding the one that is hovered.

With that said- in CSS classes and pseudo selectors have the same weighting. As such the realisable difference will be negligible, if any.

As far as semantics is concerned, it generally makes more sense when reading CSS to have a.btn:hover - e.g. a elements with the btn class which are hovered. Also, dont forget the element and class are part of your HTML, so when scanning your CSS these appear together making identifying effected elements easier.

SW4
  • 69,876
  • 20
  • 132
  • 137
  • Tnks a lot! Great explanation ever. ^^ – Samuel Lamim de Carvalho Apr 23 '14 at 14:21
  • 1
    I'd assume all reasonable CSS engines are smart enough to execute all selectors (but not combinators) in parallel (i.e. in the order they choose). – John Dvorak Apr 23 '14 at 14:22
  • What Jan Dvorak said - RTL evaluation only applies across combinators, not to individual simple selectors (there really is no meaningful reason for that). Certain simple selectors such as type, ID and class selectors are prioritized above any other simple selector - see the last paragraph and the comments under http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672 for a firsthand account. – BoltClock Jun 23 '14 at 10:33