Certain CSS names not working

  • gwebgem

    (@gwebgem)


    5 years, 8 months ago

    I have a child theme for my website. I have added class names to one of my page banners. For some reason most css names are not working. For example…

    .desktop {display: none} – – works
    .aboutCover {display: none} – – does not work
    .about23 {display:none} worked for a moment, but then it stopped working (unless it was possibly my cache).

    This is weird. I tried using the built in class names through inspector, but those did not work either. Also, when looking at inspector the class names are listed, but they don’t seem to be responding unless I am using .desktop. Any help in understanding this is appreciated.

    Thanks,
    Grant

    • This topic was modified 5 years, 8 months ago by t-p.
    • This topic was modified 5 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 8 months ago

    Please provide a link to a page on your site where we can see this. Thanks. Note: Your link will be public and we will not later remove it.

    Thread Starter gwebgem

    (@gwebgem)

    5 years, 8 months ago

    https://webgemsolutions.com/about/

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 8 months ago

    You need to look at how they’re represented in the inspector. For example, to dissappear “.aboutCover”, it would be

    section.wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image.uagb-block-4fa9dbdc.desktop.aboutCover {
   display:none;
}
    Thread Starter gwebgem

    (@gwebgem)

    5 years, 8 months ago

    Thanks Steven,
    Why is it necessary to call all of the classes? In the past I only needed to use just one of them. For example, just calling “.desktop” works. Why can’t I call just “.aboutCover?”

    Grant

    Website Rob

    (@website-rob)

    5 years, 7 months ago

    It has to do with a CSS property called Specificity, which is basically Order of Priority.

    No space between classes has a higher Specificity than those that do because it’s treated as a separate class–a Super Class if you will.

    section.wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image.uagb-block-4fa9dbdc.desktop.aboutCover

    Has a higher priority because the classes have been chained together (no space between them). So the “.destop.aboutCover” is not (in this case) a stand-alone class. Because it is chained to 1 Element (section) and 4 Classes you have to include them all when wanting to make a change.

    If you had a space before .desktop:
    section.wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image.uagb-block-4fa9dbdc .desktop.aboutCover

    then you could do something with it.

    Here is a more thorough explanation:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

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

The topic ‘Certain CSS names not working’ is closed to new replies.