:nth-of-type isn't working for me

HTML & CSS
1

Hello!

My site in progress: http://goo.gl/UOLXRu

Toward the bottom of the home page you’ll see 4 images that are side by side and that are entitled Test Post #1 - Test Post #2.

Under those posts, you see 4 featured pages entitled “About Amore, Typography, About Amore, Typography.” Also, you’ll see 4 Text Widgets. For some reason that I can’t figure out, this code isn’t working to make them behave like the 4 images that are above them:

.home-bottom .featuredpage:nth-of-type(4n+1),
.home-bottom .featuredpost .post:nth-child(4n+1),
.home-bottom .widget_text:nth-of-type(4n+1) {
clear: both;
margin-left: 0;
}

What am I missing?

2

Hi, susannelson.

Give either of these a try and see if it works:


.home-bottom .featuredpost .post:nth-of-type(4n+1),
.home-bottom .featuredpage:nth-of-type(4n+[color=blue]2[/color]),
.home-bottom .widget_text:nth-of-type(4n+[color=blue]2[/color]) {
    clear: both;
    margin-left: 0;
}

or


.home-bottom .featuredpost .post:nth-[color=blue]child[/color](4n+1),
.home-bottom .featuredpage:nth-[color=blue]child[/color](4n+[color=blue]2[/color]),
.home-bottom .widget_text:nth-[color=blue]child[/color](4n+[color=blue]2[/color]) {
    clear: both;
    margin-left: 0;
}

In your case, nth-child and nth-of-type target the same elements.

I didn’t test this with more content, so it might not work.

3

Hi, susannelson.

The code that I posted in #2 will only work in your existing page if the content does not change.

I would like to suggest a more stable approach, if you can incorporate it into your page.
This is a working concept page.


<!DOCTYPE HTML">
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
http://www.sitepoint.com/forums/showthread.php?1227351-nth-of-type-isn-t-working-for-me
2014.08.11 18:57
susannelson
-->
    <title>nth-child()</title>
    <style type="text/css">

section {
    width:auto;  /* if needed */
    outline:1px dotted magenta;
    overflow:hidden;  /* because the articles are floating */
}

article {
    width:200px;  /* TEST value */
    height:100px;  /* TEST value */
    float:left;
    margin-left:20px;
    margin-bottom:20px;
}

article:nth-child(4n+1) {
    clear:both;
    margin-left:0;
}

.featuredpost article {background:#def;}
.featuredpage article {background:#fed;}
.widget_text article {background:#dfd;}

    </style>
</head>
<body>

<div class="">
    <section class="featuredpost">
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
    </section>
    <section class="featuredpage">
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
    </section>
    <section class="widget_text">
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
        <article class=""></article>
    </section>
</div>

</body>
</html>

You may have chosen :nth-of-type() because you believe that it keys on the classname. Unfortunately, that is a common misconception for both :nth-child() and :nth-of-type(). It keys on the tag associated with the first appearance of the classname, then counts “like” tags from the beginning of the container. It doesn’t matter where in the lineup that first classname appears. When a counted tag is reached, the pseudoclass checks to see if the classname is present and if it is, the new styles are applied; if no classname is present, no new styles are applied.

4

Thank you for your help, ronpat, but most of all, thank you for this. I didn’t understand why it wasn’t working, but now I do. This is going to be a premade WordPress theme, so I think I can’t include the featured pages and text widgets in the CSS. I need for this to be easy for non-techies to use, so I think I’ll just stick with the featured posts. But now I understand how it works, so thanks again!!