WordPress CSS, selecting elements for all widgets of a certain type?

1 Views

I’m totally new to CSS and I’m trying to modify a WordPress theme. I have searched for my question and the closest I could find was this, but I don’t understand what to do using that example.

Basically I want to hide the title element ‘custom-sidebar-title-wrapper’ of all widgets of a specific type, that being ‘widget_goodlayers-1-1-banner-widget’.

Read More

Here is the class hierarchy I copied from element inspector. 

<div class="custom-sidebar widget_goodlayers-1-1-banner-widget" id="goodlayers-1-1-banner-widget-31">
    <div class="custom-sidebar-title-wrapper">_</div>
    <div class="under-banner-title">_</div>
    <div class="banner-widget1-1"">_</div>
</div>

The way that I have been trying to solve the problem is this 

div.custom-sidebar widget_goodlayers-1-1-banner-widget custom-sidebar-title-wrapper {
display: none;
}

But it doesn’t work, probably because I am doing something wrong or putting things in the wrong order, please help! Thanks!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You’re putting a space between two classes on the same element and not prefixing your classes with .:

    Change: div.custom-sidebar widget_goodlayers-1-1-banner-widget ...

    To: div.custom-sidebar.widget_goodlayers-1-1-banner-widget ...

    And change: custom-sidebar-title-wrapper

    To: .custom-sidebar-title-wrapper

    div.custom-sidebar.widget_goodlayers-1-1-banner-widget .custom-sidebar-title-wrapper {
    display: none;
}

    This selects the element with class “custom-sidebar-title-wrapper” descendant of any div element with classes “custom-sidebar” and “widget_goodlayers-1-1-banner-widget”.

    You can refer to the Selectors documentation for in-depth info about each selector type.