类型为nth的CSS选择器在<a>标签中</a>不起作用

Question

Before, I had this working:

CSS

.categorie-image:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
    margin-top: 20px;
}

HTML

<div class="categorie-image custom-border" style="background-image:url(succes.png);">
    <div class="categorie-title">Text</div>
</div>

But then I needed to make the divs clickable, so I wrapped them inside a <a href="#"> :

<a href="#">
    <div class="categorie-image custom-border" style="background-image:url(succes.png);">
        <div class="categorie-title">Text</div>
    </div>
</a>

But now my CSS is not working anymore. I know it has something to do with child elements, but I tried:

• a.categorie-image:not(:first-of-type)...
• a > .categorie-image:not(:first-of-type)...
• div.categorie-image:not(:first-of-type)...

But without luck. How should I change my CSS?

Answer 1

The below selector doesn't work anymore because the div which has class='categorie-image' is the first of its type within this parent (which is the a ). So, the negation ( :not(:first-of-type) ) will prevent the element from being selected.

.categorie-image:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)){
    margin-top: 20px;
}

<a href="#">
    <div class="categorie-image custom-border" style="background-image:url(succes.png);">
        <div class="categorie-title">Text</div>
    </div>
</a>

Note that even though you have attached the negations to a class selector, the nth-of-type selector actually works on the element type. So, your selector would select the first element of every type ( div , a , p etc) which are not the first or second or third of its type within each parent and also has the class .categorie-image .

Also, as Vitorino fernandes points out in his comment , it might be better to avoid chaining negation selectors and use nth-of-type(n+4) (or nth-child(n+4) whichever is appropriate for your case) to select all elements after the third.

---

While the above is the reason why the selector no longer works, I can only assume that prior to the a being added you had some other div element before the div with class='categorie-image' .

Answer 2

It's not working because each <div class="categorie-image"> is now a child of the wrapping <a> .

You're best off using the <a> as the selector and using a child selector. Here's a fiddle: https://jsfiddle.net/zsbzkg0m/

a:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) div.categorie-image{
    margin-top: 20px;
}

Answer 3

a tags are inline elements, div are block elements.

It's not a good practice to put block elements inside your inline elements.

But it's possible to just create a script to make the whole div clickable. Something like.

$("div").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return false;
});

HTML :

<div class="categorie-image custom-border" style="background-image:url(succes.png);">
    <div class="categorie-title">Text</div>
    <a href="#">Link</a>
</div>

This looks for a tags inside your div, and you can click anywhere on the div and it will redirect you to your link href value.

This case you won't have to change your CSS. Just an option.