Menu Item CSS Classes losing class pseudoselector ‘:’

  • maxweld

    (@maxweld)


    1 year, 3 months ago

    I am trying to add a pseudo-class to menu-items using the Appearance -> Menus page in the Admin Panels.

    I have used the screen options to show the Advanced Menu Property CSS Classes. If I add a CSS class it works fine, unless I add one with a pseudo-class. In this case it seems to be saved without the colon, and when I inspect the page, it is being applied to the menu item without the colon.

    I am using Tailwind CSS, but it seems the same if using CSS naturally.

    For example:
    Entered in the screen: hover:text-blue
    Saved in the field: hovertext-blue
    appears in the HTML: class=”hovertext-blue”

    Is there some sort of stripping of characters occurring?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator threadi

    (@threadi)

    1 year, 3 months ago

    No colons are allowed in CSS classes. It is therefore absolutely correct for WordPress to adapt this input.

    Why do you want to use a colon here at all?

    Thread Starter maxweld

    (@maxweld)

    1 year, 3 months ago

    Hi @threadi. Colons are permitted when specifying pseudoclasses. I want to specify what happens when the cursor hovers over the menu item.

    For example, hover:bg-red-600
    would turn the menu item’s background to red when the mouse hovered over the menu item.

    I can apply this and it works using the functions.php, but cannot do so with the Admin fields.

    • This reply was modified 1 year, 3 months ago by maxweld.
    Moderator threadi

    (@threadi)

    1 year, 3 months ago

    You specify pseudo classes in the CSS, never in the HTML code.

    Example:
    If you give the menu item the class bg-red-600 (and only that, written exactly like that) then you have to write it in the CSS:

    .bg-red-600:hover { background-color: red; }

    Even if the term “pseudo class” suggests it, these are not real classes that are stored in the HTML code. “Pseudo” simply means that they are not. They are only used in the CSS code – not in HTML.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Menu Item CSS Classes losing class pseudoselector ‘:’’ is closed to new replies.

Tags