CSS :not() Selector failure

Question

Recently, when I was using the CSS:not selector, I found a problem with spaces. Maybe I have a problem with the selector's understanding, please help me to answer。 I want to select all elements except the seventh element in the main element。

        main:not(section:nth-child(7)){                    
            width: 100px;             
            height: 100px;
            background-color: red;
            margin: 10px;
        }

    <main>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>seven</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
    </main>

It is invalid after selection, but it will be valid after adding a space before the: not selector. This is the reason？

        main :not(section:nth-child(7)){                    
            width: 100px;             
            height: 100px;
            background-color: red;
            margin: 10px;
        }

    <main>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>seven</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
    </main>

And I tried to select with sibling elements, but also found the space problem. Contrary to the above, adding spaces is invalid, deleting spaces is effective.

        section :not(section:nth-child(7)){                    
            width: 100px;             
            height: 100px;
            background-color: red;
            margin: 10px;
        }

    <main>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>seven</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
    </main>

The above code is invalid after adding a space before the not selector。

        section:not(section:nth-child(7)){                    
            width: 100px;             
            height: 100px;
            background-color: red;
            margin: 10px;
        }

    <main>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>seven</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
    </main>

Delete: the space in front of the not selector will be effective。

Is the grammar wrong in other styles? Or is there any difference that prevents him from using it correctly？ — lcrazyl, Aug 05 '21 at 03:02
The difference between first and second is related with CSS Combinators. And the third and fourth are wrong. — Kirill Savik, Aug 05 '21 at 03:07
The following post could clear you more about this issue https://stackoverflow.com/questions/18624551/css-space-before-selector — Roberto C. Rodriguez-Hidalgo, Aug 05 '21 at 03:13

score -1 · Accepted Answer · answered Aug 05 '21 at 03:16

Main is just parent element you can directly use the select tag as a selector and apply not and nth-of-type

this article will give you information about :nth-child() vs :nth-of-child()

if you found this will help you then please give me like

main section:not(:nth-of-type(7)){
    width: 100px;             
    height: 100px;
    background-color: red;
    margin: 10px;
 }

<main>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
        <section>seven</section>
        <section>1</section>
        <section>1</section>
        <section>1</section>
    </main>

Thank you for your answer, it will be very helpful for me to understand CSS selectors! — lcrazyl, Aug 05 '21 at 03:19

CSS :not() Selector failure

1 Answers1