Home/ Questions/Q 822395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:47:36+00:00

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

  • 0

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

I have a problem with selecting unordered lists (i.e ul > li.class-name class-name-number) at the above dom location in CSS. I am working with a wordpress theme.

Basically could I have suggestions for the correct selector to use in order to influence this tag? I can provide a simplified html structure if it will help.

I’ve tried a number of selectors along the lines of:

(sometimes)#page (# or .)cats (sometimes)ul li(sometimes with class name)

EDIT: I’ve tried the selectors suggested in the wordpress docs.

html structure: 

<body class='*dynamic*'>
<div id="wrapper">
<div id="page">


<div id="header" role="banner">
        <h1><a href=""></a>Header</h1>
        <div class="description">Site info</div>
</div>

<div id="cats">
<ul>
<li class="page_item dynamically generated class"></li>
</ul>

<ul>
<li class="category_item dynamically generated class"></li>
</ul>
</div>

It is the two list structures I’m having problems with

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

This is testing style. When it’s working, I’ll be changing it.

As requested

FURTHER:
I think this must be some sort of inheritance problem, so I’m going to attempt a slash and burn approach.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0