Welcome to the MacNN Forums.

l008com · Nov 3, 2010, 02:52 PM

I put a lot of thought into the title of this thread...

Anyway, I have a web page, where CSS isn't doing what I want it do. I made a mockup that is the exact same situation, boiled down to just what I'm having trouble with.

The class "group_title" seems to be getting overridden by the "green" class. I thought the "more specific" declarations would override less specific? <li class='group_title'> seems pretty specific to me??

Anyway here's a link to the mock-up page:
CSS Test Page

And for the hell of it, here's the real page (still very much a work in progress so try not to get too off-topic

):
MenuLizard : Boston : The Hen House

And here's the raw code of the mockup if you don't like links:

Code:
<html>

	<head>
		<title>CSS Test Page</title>
		<style>
			.cell_list
				{
				list-style-type: none;
				margin: 0px;
				padding-left: 0px;
				background: #000000;
				}

			.green li
				{
				border-bottom: #009800 solid 1px;
				border-left: #009800 solid 1px;
				border-right: #009800 solid 1px;
				background: #a1ffa1;
				}
				
			.green li:first-child
				{
				border-top: #009800 solid 1px;
				}
				
			.green li:hover
				{
				opacity: 0.8;
				}
			
			.group_title
				{
				text-align: center;
				font-weight: bold;
				
				/* shouldn't this override the background from "green li"? */
				background: #ff0000;
				}
		</style>
	</head>

	<body>
		<ul class='cell_list green'>
			<li class='group_title'>Group 1
			<li>Item 1
			<li>Item 2
			<li>Item 3
			<li>Item 4
			<li class='group_title'>Group 2
			<li>Item 1
			<li>Item 2
			<li>Item 3
			<li>Item 4
			<li>Item 5
		</ul>
	</body>

</html>

andi*pandi · 07:42 AM

Try being more item-specific, like: li.group_title or .green li.group_title . If those don't work, there is always !important which will tell it to override the cascade.

Oisín · 04:43 AM

More specific CSS rules will overrule less specific ones—you’ve got both .green li and .group_title specified, and the former is more specific than the latter (it specifies two levels in the CSS hierarchy, whereas .group_title specifies only one). Therefore, the background in .group_title won’t override .green li.

You can just do !important after the declaration you need to override it’s ‘parent’ declaration, or add an extra cascading level to make it even more specific and thus override as it’s supposed to, by doing .green li.group_title.

Edit: Err, started typing this about an hour ago and got distracted, didn’t see Andi’s reply in the meantime.

andi*pandi · Nov 3, 2010, 04:50 PM

I'm relieved to know that your answer concurs with mine.

exca1ibur · Nov 3, 2010, 10:25 PM

It should to be li.green_title. (no space)

l008com · Nov 3, 2010, 11:22 PM

Can I 'bless' a whole class with important, so when applied, it will override everything else? I'm trying to avoid declaring the class of every single item individually. Some of these pages are quite long, and I'm savings many a byte by not having every <li> have it's own class='classname'

exca1ibur · Nov 3, 2010, 11:27 PM

Just change .green_title to li.green_title and style like you are now.

l008com · Nov 3, 2010, 11:34 PM

Ok. I don't really get why that works... but it does and thats good enough for now....

exca1ibur · Nov 4, 2010, 12:41 AM

It works because you are calling the li node with the class name green_title. If you do it with the space it looks for li and the class within the node, not the class name of the node itself.

Oisín · Nov 4, 2010, 04:43 AM

Originally Posted by exca1ibur

It should to be li.green_title. (no space)

You’re absolutely right; typo fixed.

andi*pandi · Nov 4, 2010, 07:41 AM

d'oh!