Geek Answers Handbook

Cannot customize CSS: not () selector as needed

I'm a bit stump trying to get the CSS: not () selector to work for me in a very specific way. I spent a huge amount of time searching and found good resources like a page , but in the end I had to admit defeat. I hope a more enlightened soul can help.

Basically, I want to blur the text, leaving the other bits of the text intact. See below HTML / CSS:

<div class="top-hide">
    <p class="reveal">Paragraph 1</p>
    <div class="reveal">Paragraph 2</div>
    <div class="reveal"><p>Paragraph 3</p></div>
    <div><p class="reveal">Paragraph 4</p></div>
    <div class="reveal"><p class="reveal">Paragraph 5</p></div>
    <p>Paragraph 6</p>
    <div>Paragraph 7</div>
    <div><p>Paragraph 8</p></div>
</div>

.top-hide :not(.reveal) {
    color: transparent;
    text-shadow: 0 0 10px black;
}

I would like to show items 1 to 5, while 6 to 8 should be blurred. However, paragraphs 1, 2, and 5 are disclosed, and the rest are blurred. Could you tell me why my CSS is not working and build the right CSS to achieve my goal.

JSFiddle, , .

+4
3

, . :

HTML

<body>
    <div class="top-hide">
        <p class="reveal">Paragraph 1</p>
        <div class="reveal">Paragraph 2</div>
        <div class="reveal"><p>Paragraph 3</p></div>
        <!-- It doesn't work for the paragraph 3 is because, at first the 
        browser checks if `.top-hide :not(.reveal)` case is met when looking at 
        `div.top-hide > div.reveal`, It does not. Then again, it checks for 
        `.top-hide :not(.reveal)` when it looks at `div.top-hide p`, but this time
        the `.top-hide :not(.reveal)` is met. -->

        <div><p class="reveal">Paragraph 4</p></div>
        <!-- In this case, the case is met for `div.top-hide div` -->

        <div class="reveal"><p class="reveal">Paragraph 5</p></div>
        <p>Paragraph 6</p>
        <div>Paragraph 7</div>
        <div><p>Paragraph 8</p></div>
    </div>
</body>

CSS

.top-hide :not(.reveal) {
    color: transparent;
    text-shadow: 0 0 10px black;
}

.top-hide .reveal, .top-hide .reveal *{
    color: black;
    text-shadow: none;
}

JSFIDDLE

+1
<div><p class="reveal">Paragraph 4</p></div>

, class="reveal", , , div ( ).

CSS , divs, class= "".

:

  • class="reveal" (.. <div class="reveal"><p>Paragraph 4</p></div>
  • , ( ): .top-hide > :not(.reveal)
+4

... :

<div class="reveal"><p>Paragraph 3</p></div>

divshows it, but pmakes it invalid. A quick fix is ​​to always set the class at the first level (direct children), and then use the direct child selector:

Updated JsFiddle

.top-hide > :not(.reveal) {
    color: transparent;
    text-shadow: 0 0 10px black;
}
+1
source

More articles:


All Articles