Tricky Selector

[angelazou]

I have this header style that I applied to a set of divs using shortcode. And I used one of them at the sidebar using a text widget, indicated by the #text-7 selector. The problem is that, I want one set of styles to be applied to the main content and another set applied to the sidebars, but I can’t seem to tell CSS to differentiate between the text widget and the main content styles (they are using the same set of DIVs except #text-7.

This is sample code for the sidebar, and the following that, is the sample code for the main content

!-- widget start -->
			
Title
post1




post2

Title
post1




post2

The styles should only be applied to h3 header. I tried many combinations like #text-7 h3, #text-7>.textwidget h3, and much more. But nothing works. I’m really lost.

Angela

[Mottie]

Hi Angelazou!

It looks like the markup is missing a couple of closing divs so maybe the “text-7” div is wrapping the entire page? I cleaned up and formatted the top snippet of code (the bottom one has the same issue), notice the two “</div>” under the widget end comment:

Title
















post1

















post2









 

[angelazou]

Hi Mottie,

Maybe the sample code that I showed wasn’t structurally correct because I had to remove the contents and show only 2 links rather than 5. And thanks for clearing that up for me. I don’t think there is a code nesting problem, though, because if it were, my page would have been a mess right now.
Anyhow, I still looking for ways to select the h3 element from the text widget only, if you have some ideas on how to do it, please share. Thanks.

Angela

[angelazou]

The only selector that could differentiate them (because they are using the same shortcode, thus, the same output) is the text widget selectors, like #text-7, .textwidget, .widget-text, and .suf-widget. I’ve tried many combinations of them. I just can’t find the right match to match the widget only without matching the shortcode content in the main page as well.

[angelazou]

Previously, I had been selecting the widgets using the following code:

.suf-widget h3, h2.posttitle a.entry-title, h1.posttitle a.entry-title {

}

What makes this tricky is that the shortcode itself generates the title and the content, and there is no unique class/id that can distinguish itself from the others (at the main content). I even tried to wrap the shortcode in an ID selector and select the ‘ID h3’ and ‘ID h3 a’, but it didn’t work either. How is this possible?

[Mottie]

I’m guessing the problem might be that the “text-7” id might not be unique, or changes when you add more content?

So, is there something wrapping the sidebar? Or something wrapping the main content? If so, why can’t you target that? Honestly, it is difficult to help without seeing the whole page of HTML.

[angelazou]

Well, all the code for the sidebar is here http://jsfiddle.net/C3URK/ . I don’t understand what do you mean by text-7, it’s an id selector, and there are no duplicate selector in the CSS stylesheet. So if you mean there are some overlapping in CSS, there aren’t. (Inherited CSS may be)

[angelazou]

Hi Senff,

The code works as expected, I’m now beginning to think this may have something to do with inheritance. The overall result look like this http://jsfiddle.net/JYTw5/ , whereas I only want this http://jsfiddle.net/7Qee6/ . I can’t delete the .cat-category class because other content are using it. Also, I can’t remove it from the code because it’s generated, rather than coded.

Angela

[Mottie]

I guess I was asking, in a round about way, if “text-7” is unique. I see in the HTML that it is… so as Senff said there must be something else causing the problem. I guess we need to see your css now.

[angelazou]

Hi Mottie, do you mean the entire CSS file, or just a section of it? It’s kind of long.

Angela

[angelazou]

Unfortunately, I’m prepping it locally, I’ve placed it here http://pastebin.com/rhzYsjun

[angelazou]

Well, the full context of the code and the problem is shown here http://jsfiddle.net/JYTw5/ . If you visit the fiddle, you will see the issue (2 gradients) and that’s not what I want. This ( http://jsfiddle.net/7Qee6/ ) is what I need it to look like, but I can’t remove the .cat-category class because it’s needed by other elements.

And like I mentioned previously, anything inside the cat-category class is not available for my hand editing because they are generated by the plugin.

Angela

[Mottie]

Try adding this bit of css to over-ride the default css that you don’t want in the “text-7” div (demo)

#text-7 .cat-post-category {

background: transparent;

-webkit-border-radius: 2px 8px 2px 2px;

-moz-border-radius: 2px 8px 2px 2px;

border-radius: 2px 8px 2px 2px;

}

[angelazou]

Finally, my problem is solved. Not sure I expressed say what I meant, and caused all these confusions, gotta work on it then. Thanks all for your patience and expertise!

Angela

[Author]

Posts