ansaurus

Question

CSS Selector Issue

Answer 1

+3 A:

If this is your selector, there are a few issues with it.

html > body .home blog logged-in > div #wrapper > div #page > div .cats

I'll make a few assumptions. Since you didn't provide actual code.

I presume with the first part (html > body .home blog logged-in) you're trying to match <body class="home blog logged-in">. The correct selector for matching exactly that would be: body.home.blog.logged-in, but in case you just want to match any of the classes, you need a selector for each of them. If they apply the same styling, you can have them as a comma separated list, like this:

body.home, body.blog, body.logged-in { ... }

The next part (body > div #wrapper) I assume you want to match <body><div id="wrapper">. The correct selector for that is body > div#wrapper. The current selector looks for <body><div><anytag id="wrapper">.

The same applies for the rest of your selector. I'm assuming you simply have extraneous white space in there, which cause the selector to not match. For more information on CSS selectors, see documentation on W3.org, or if you're looking for more basic stuff the W3Schools tutorial on CSS.

Update after added HTML:

There is no need to have such a specific selector. You can match the lists with the selector:

/* Match both lists */
div#cats ul {}

/* Match first list */
div#cats ul:first-child {}

/* Match last list (CSS3) */
div#cats ul:last-child {}

/* Match items */
div#cats li.page-item {}
div#cats li.category-item {}
/* NOTE! Underscores are not legal characters in classes and ids */

/* Match generated class */
div#cats li.dynamically-generated-class {}

/* Match generated class filtered by two classes */
div#cats li.page-item.dynamically-generated-class {}
div#cats li.category-item.dynamically-generated-class {}

If you have no need for matching .page-item and .category-item specifically in the div#cats only (e.g. they are not present elsewhere on the page), there is no need for prefixing the selector with div#cats.

Update 2:

The CSS selector you've posted is correct for the html you posted. (See my demo). Perhaps you have other rules which are affecting the result as well. Try adding a border to the rule, to see if it really is matching the correct element.

Firebug is a very useful debugging tool for Firefox, which let's you see all the css rules which are being applied to a element. Perhaps that can help you?

nikc 2010-06-07 10:54:25

There is no white space in the selectors in source files. The selector provided was generated by the firefox web developer plugin and is otherwise accruate

YsoL8 2010-06-07 11:00:00

Ah, I see I misunderstood that part of the question then. Answer was updated.

nikc 2010-06-07 11:04:23

I tried a few variations on those selectors but none worked! I know this is the correct stylesheet, and I've been successfully editing it up to this point.

YsoL8 2010-06-07 11:16:07

Please update your question with the css you're trying to apply.

nikc 2010-06-07 11:17:30

Post edited as requested

YsoL8 2010-06-07 11:20:50

Answer updated.

nikc 2010-06-07 11:30:02

I try slash/burn on my html until it clears.

YsoL8 2010-06-07 11:32:24

Somehow it's cleared itself while I was commenting out sections of CSS. I've not actually changed any rules yet which is a bit confusing.On a side-note, do you know any developer/designer streamlined css files for wordpress?

YsoL8 2010-06-07 11:56:46

Sorry, I don't. I tend to roll my own. Glad you solved your problem.

nikc 2010-06-07 12:01:10

Answer 2

A:

use Firebug to check if the div#cats ul style is being applied. my guess is that it's being overwritten by another rule (maybe another stylesheet). you could try using !important like so

div#cats ul {font-size: 24px !important;}

or you could try a more specific rule like

div#cats ul li {font-size: 24px !important;}

pixeltocode 2010-06-07 11:34:01

ansaurus

tags:

views:

answers:

CSS Selector Issue

related questions