CSS specificity issues - Is it C5 somehow?
Permalink
Ok, I have been battling this issue all day, and I am asking for some help. I had this working perfectly before I made it into a theme, and have had to Iron out kinks, but this one, according to how CSS works, shouldn't be a problem, but it is. Any help would be wonderful.
I am working on this page,http://www.solowoman.net/new
As you can see, it is a redesign, and the problem I am having is that bottom right column that has the orange background, but the yellow heading...the heading should be orange.
I have the orange section heading styles with an orangeheading class, and the yellows with a yellow. For some reason, the yellow heading class is somehow overriding the orange class in that bottom orange section, even though the yellow class isn't even assigned to it. I have rearranged where it lands in the code, so hopefully all the orange headings will happen earlier in the code, so that even with the same specificity, the yellows should win out in their divs, but they aren't Any help would be great, thanks.
Not only that, but the stylings I have on the headings for those classes, are effecting the backend too, even though I have them set to specifically only work on headings of that specific class.
I am working on this page,http://www.solowoman.net/new
As you can see, it is a redesign, and the problem I am having is that bottom right column that has the orange background, but the yellow heading...the heading should be orange.
I have the orange section heading styles with an orangeheading class, and the yellows with a yellow. For some reason, the yellow heading class is somehow overriding the orange class in that bottom orange section, even though the yellow class isn't even assigned to it. I have rearranged where it lands in the code, so hopefully all the orange headings will happen earlier in the code, so that even with the same specificity, the yellows should win out in their divs, but they aren't Any help would be great, thanks.
Not only that, but the stylings I have on the headings for those classes, are effecting the backend too, even though I have them set to specifically only work on headings of that specific class.
Here's a couple suggestions:
First, I tend to think its best to start your CSS styles with a named ID first.
Here's an example:
#main h1 { font-size: 24px }
Now the style will apply to anything within my "main" DIV. If it's an element of Concrete, it won't be inside this DIV, so it won't inherit the other style.
Taking a look at your site, it also looks like there is a problem with your selector. Here's one I saw when debugging the site:
.orangeheading h1, h2, h3, h4, h5, h6
If I understand CSS selectors correctly, this will apply to orange heading H1 tags, but then it will apply to any H2 tag, and so on. As a result, you would need to write the selector like this:
.orangeheading h1, .orangeheading h2, .orangeheading h3, .orangeheading h4, .orangeheading h5, .orangeheading h6
Let me know if that helps!
First, I tend to think its best to start your CSS styles with a named ID first.
Here's an example:
#main h1 { font-size: 24px }
Now the style will apply to anything within my "main" DIV. If it's an element of Concrete, it won't be inside this DIV, so it won't inherit the other style.
Taking a look at your site, it also looks like there is a problem with your selector. Here's one I saw when debugging the site:
.orangeheading h1, h2, h3, h4, h5, h6
If I understand CSS selectors correctly, this will apply to orange heading H1 tags, but then it will apply to any H2 tag, and so on. As a result, you would need to write the selector like this:
.orangeheading h1, .orangeheading h2, .orangeheading h3, .orangeheading h4, .orangeheading h5, .orangeheading h6
Let me know if that helps!
Oh yes thank you, I for some reason figured the grouping would work that way, and didn't think I would need to specify the class for every heading tag.
Thanks for your help.
Thanks for your help.
Well, when I put them all back to heading 1, the colors no longer conflicted, and it works now how it is supposed to.
Thanks for anyone that was working on a solution.