CODEWITHSUNDEEP
htmlcsssasscss-selectors
shiftmx6
shiftmx6

Reputation: 11

Trying to alternate background colors using nth-of-type

I'm having a problem using the nth-of-type selector. I'm sure my code structure is causing the problem, but I've run out of ideas.

Here is my code...

<div class="blog-gallery container">
<div class="row">
    <?php query_posts('cat=6'); ?><?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 blog-list">
        <div class="blog-content">
            <h3 class="post-title"><?php the_title(); ?></h3>
            <h6 class="post-author"><?php the_author() ?></h6>
        </div><!--content-->
    </div><!--col-->
    <?php endwhile; endif; ?>
</div><!--row-->
</div><!--container-->

and the css...

.blog-gallery {

.blog-list {
    min-height: 400px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    display: table;

    .blog-content {
        display: table-cell;
        vertical-align: middle;

        &:nth-of-type(1){
            background: $orange;
        }

        &:nth-of-type(2){
            background: $blue;
        }

        &:nth-of-type(3){
            background: $green;
        }

        &:nth-of-type(4){
            background: $blue;
        }

        &:nth-of-type(5){
            background: $green;
        }

        &:nth-of-type(6){
            background: $orange;
        }

        &:nth-of-type(7){
            background: $green;
        }

        &:nth-of-type(8){
            background: $orange;
        }

        &:nth-of-type(9){
            background: $blue;
        }

        .post-title, .post-author {
            font-family: $b_font;
        }

        .post-title {
            font-size: 32px;
            font-weight: 300;
        }
    }

}
}

My problem is that I'm trying to alternate background colors between between the 9 .blog-content divs that are being output...however, I'm unable to do so, and they're all defaulting the the $orange color. Again, I believe it has something to do with how my html is structured, but I can't put my finger on it.

Thank you for the help!

Upvotes: 1

Views: 136

Answers (3)

shiftmx6
shiftmx6

Reputation: 11

Ok, one of my buddies and I changed up the PHP, and got it to work.

<div class="blog-gallery container">
<div class="row">
    <?php query_posts('cat=6'); ?><?php if ( have_posts() ) : 
     $blogNumber = 1;

    while (have_posts()) : the_post(); ?>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 post-row">
        <div class=“blog-content blog-post-<?php echo $blogNumber++; ?>">
            <h3 class="post-title"><?php the_title(); ?></h3>
            <h6 class="post-author"><?php the_author() ?></h6>
        </div><!--content-->
    </div><!--col-->
    <?php endwhile; endif; ?>
</div><!--row-->
</div><!--container-->

Long story short...each blog post that is generated is being assigned a number (blog-post-1, blog-post-2, etc...). From there, I was able to target the specific post, and style it appropriately. Thanks for the suggestions!

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

Have you double-checked that there isn't an issue with your CSS preprocessor or with your colour and font variables or your php logic?

With very minor adjustments I have your code working well here using SCSS

CSS

.blog-gallery {

.blog-list {
    min-height: 400px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    display: table;

    .blog-content {
        display: table-cell;
        vertical-align: middle;

        &:nth-of-type(1){
            background: orange;
        }

        &:nth-of-type(2){
            background: blue;
        }

        &:nth-of-type(3){
            background: green;
        }

        &:nth-of-type(4){
            background: blue;
        }

        &:nth-of-type(5){
            background: green;
        }

        &:nth-of-type(6){
            background: orange;
        }

        &:nth-of-type(7){
            background: green;
        }

        &:nth-of-type(8){
            background: orange;
        }

        &:nth-of-type(9){
            background: blue;
        }

        .post-title, .post-author {
            // font-family: $b_font;
        }

        .post-title {
            font-size: 32px;
            font-weight: 300;
        }
    }

}
}

HTML

<div class="blog-gallery container">
<div class="row">

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 blog-list">
        <div class="blog-content">
            <h3 class="post-title">title</h3>
            <h6 class="post-author">author</h6>
        </div><!--content-->

      ...

    </div><!--col-->

</div><!--row-->
</div><!--container-->

Upvotes: 1

Scott Hunter
Scott Hunter

Reputation: 49920

The argument to nth-of-type should be of the form an+b. In your case, a would be 9 and b would be the argument you currently have minus 1.

Upvotes: 1

Related Questions