Question

i’m using wordpress and i have an element i want to style… it’s called…

<h2 class="widgettitle">

now, i know i can do,

h2.wigettitle {
whatever:css;
}

however, the problem i have is that i have multiple widgets with the same title and it effects all of them.

but, this h2.widget title is within another div called “headerarea”.

so, in my file it’s like…

<div id=headerarea">
    <h2 class="widgettitle">
               whatever title
    </h2>
</div>

so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?

i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.

hope this makes sense… thanks for any help guys.

Answer 1

Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.