Tricky Selector - CSS-Tricks

This topic is empty.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
December 15, 2011 at 9:57 am #35665
angelazou
Participant
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
December 15, 2011 at 12:29 pm #92843
Mottie
Member
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









 
```
December 15, 2011 at 8:38 pm #92868

angelazou
Participant

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

December 15, 2011 at 10:39 pm #92873

angelazou
Participant

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.

December 16, 2011 at 3:13 am #92882
angelazou
Participant
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?
December 16, 2011 at 6:34 am #92888

Mottie
Member

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.

December 18, 2011 at 1:08 am #93010

angelazou
Participant

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)

December 18, 2011 at 9:17 am #93023

angelazou
Participant

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

December 18, 2011 at 9:28 am #93024

Mottie
Member

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.

December 18, 2011 at 9:41 am #93025

angelazou
Participant

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

Angela

December 18, 2011 at 9:57 am #93027

angelazou
Participant

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

December 18, 2011 at 8:36 pm #93060

angelazou
Participant

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

December 18, 2011 at 9:08 pm #93062
Mottie
Member
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;

}
```
December 18, 2011 at 11:38 pm #93074

angelazou
Participant

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

Viewing 14 posts - 1 through 14 (of 14 total)

The forum ‘CSS’ is closed to new topics and replies.

Title

Title

Title