CSS : wondering what does "\" mean in CSS

Question

I'm trying to make dropdown menu with tailwindCSS

and there is a good example for me : https://codepen.io/PILO7980/pen/EBVxPE

but i can't recognize where is a hover control, and what is \ mean in CSS.

hope kindly help me.

.group:hover .group-hover\:block {
  display: block !important;
}

There is no :block [pseudo element](https://www.w3schools.com/css/css_pseudo_elements.asp). So it is a pure escape character. — Markus Zeller, May 10 '20 at 15:16
from the duplicate: https://stackoverflow.com/a/6732899/8620333 — Temani Afif, May 10 '20 at 15:27

score 2 · Accepted Answer · answered May 10 '20 at 15:13

\ has no specific CSS meaning aside of escaping the next character. Here it allows to include the : as part of the group-hover:block class name and avoids interpreting it as a pseudo-selector (all of which are starting with the : character).

Regarding the hover control, it is actually implemented through the inline styles of your linked example. For instance <a class="font-semibold whitespace-no-wrap text-blue-600 hover:text-blue-800" means "apply the font-semibold, whitespace-no-wrap and text-blue-600 CSS classes on this anchor, and apply the text-blue-800 class on it when it is hovered".

score 0 · Answer 2 · answered May 10 '20 at 15:14

0

Since the : character is used in the class name (group-hover:block) you need to escape it in the CSS file with the \ character so basically the \ in .group-hover\:block is just to escape the special character of :

answered May 10 '20 at 15:14

udidu

8,269
6
48
68

CSS : wondering what does "\" mean in CSS

2 Answers2