Grow your CSS skills. Land your dream job.

Targeting li Cluster

  • # February 8, 2013 at 4:09 pm

    I am having an issue. Every page on my website is a different color (on purpose). But I want all of my portfolio pages to use the same CSS. Here is my current HTML code for header.php:

    Now, with my current PHP code, each page can be specified in my CSS my typing .page-pagename, but I do not want to type out each individual page from my portfolio drop-down:

    .page-showreel
    .page-games
    .page-illustration
    .page-literature
    .page-photography
    .page-sculpture

    Like so (for every darn CSS property). I know there has to be an easier way to do this. Is there someway I could target my portfolio li items all in one sweep? Currently, my CSS is simply using .page-portfolio, but a physical portfolio page does not actually exist. It is simply a place holder for whatever I have to do to make this work.

    Thank you in advance. You guys have always been there for me…no matter how stupid the question.

    Edit: Is it something as simple as making every li class the same name?

    # February 8, 2013 at 4:27 pm

    I don’t understand. You’re listing a menu and then a list of classes that aren’t related to each other.

    What are you trying to target here? Whole pages or just the styling the menu?

    If it’s just the menu, you can do this:

    .header-portfolio li { /* styles */ }

    # February 8, 2013 at 4:46 pm

    @TheDoc, nope. Not the menu. I have the menu looking spiffy already. I want to target all the pages within the ul without having to list each one individually. For CSS purposes. Is this possible?

    # February 8, 2013 at 5:24 pm

    Do you have a link? Do the pages share any classnames on the body that are unique to those pages?

    # February 8, 2013 at 5:47 pm

    Okay, so I read the article. Let me see if I can make sense of it. I currently have six pages that I want using the same CSS. Those pages are: Showreel, Games, Illustration, Literature, Photography, and Sculpture. In order to do what that article is saying, I need to create a parent page called Portfolio and make all six of the previously mentioned pages its children. Then I need to add:

    // Body class adding page-parent
    function cc_body_class( $classes ) {
    global $post;
    if ( is_page() ) {
    // Has parent / is sub-page
    if ( $post->post_parent ) {
    # Parent post name/slug
    $parent = get_post( $post->post_parent );
    $classes[] = ‘parent-slug-‘.$parent->post_name;
    // Parent template name
    $parent_template = get_post_meta( $parent->ID, ‘_wp_page_template’, true);
    if ( !empty($parent_template) )
    $classes[] = ‘parent-template-‘.sanitize_html_class( str_replace( ‘.’, ‘-‘, $parent_template ), ” );
    }
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘cc_body_class’ );

    To functions.php. Okay. What do I do next? Can I then refer to the parent and its children as .page-portfolio in my CSS? Or is there an extra step I missed?

    @TheDoc, I totally missed your message about a link. There is one in the first message, but to save you from scrolling up, here ya go!

    # February 8, 2013 at 7:21 pm

    Okay, I tried what I proposed and it didn’t work. I am looking at the article again. The parent page, portfolio, has a body slug of:

    Now, how do I add this to the body class? Do I simply add the above slug to:

    >

    In between the two parentheses? If it is not clear yet, I completely do not understand what I am supposed to be doing.

    # February 8, 2013 at 7:23 pm

    After adding that function to your functions.php file, when you go to any page you’ll see its parent’s slug as a class on the ``. In your case, that class is `parent-slug-portfolio`.

    # February 8, 2013 at 7:28 pm

    So, how does this apply to using CSS for all of the child pages? Instead of .page-portfolio, I use .parent-slug-portfolio? Confused.

    Edit #1: And how do you know that the class is called parent-slug-portfolio? I was looking at the body class in Firebug and I do not see this specific term anywhere.

    Edit #2: Okay, so that is what I do. Okay. Once I finish designing this website, I am going to read @chriscoyier‘s entire bookshelf. Thank you, once again, @TheDoc. I would still like to know how you knew it was parent-slug-portfolio. Thank you.

    # February 8, 2013 at 7:43 pm

    I went to the page and inspected it with Chrome’s Inspector and looked at all of the classes being applied to the body.

    # February 8, 2013 at 8:41 pm

    Hrm. I wonder if you can do that in Firebug as well. Or maybe it is time to switch to a different browser.

    # February 9, 2013 at 2:50 am

    Firebug and Inspector are virtually the same for these purposes.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".