Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefully, someone here can shed some light on this for me.

My goal is to blur certain text while leaving other text untouched. Below is the HTML/CSS code:

<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;
}

My intention is to reveal paragraphs 1 to 5 while blurring out paragraphs 6 to 8. However, only paragraphs 1, 2, and 5 are revealed while the rest remain blurred. Can you please help me understand why my CSS isn't working and provide the correct solution to achieve my desired outcome?

I've created a demonstration of the issue I'm facing using JSFiddle.

Thank you in advance.

htmlcss

Answer №1

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

Even though the paragraph is marked with class="reveal", your selector targets the div element, causing the paragraph to inherit certain styles like a transparent foreground color and shadow.

In CSS, there isn't a way to target parent elements directly, so excluding divs that contain elements with class="reveal" is not possible.

To address this issue, the easiest solution would be to:

  1. Move all instances of class="reveal" to the child elements (for example, 
    <div class="reveal"><p>Paragraph 4</p></div>
    ) and
  2. Utilize a child combinator to only hide the unrevealed children without affecting their descendants: .top-hide > :not(.reveal)

Answer №2

Here is some valuable information:

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;
}

Check out the updated JSFIDDLE

Answer №3

The arrangement of nested elements is causing issues with the selector... For instance:

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

The div triggers the reveal effect, but the p element disrupts it. One solution is to always assign the class at the top level (direct children), and then utilize a direct child selector:

Enhanced JsFiddle Example

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Utilizing WebView in my application to display html content for reading ebooks presented a challenge during development. After parsing the ebook and converting it into an html string, I load this string into the WebView component. myView.setVerticalScro ...

androidhtmlcsswebview

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

javascriptcssreactjsmaterial-designmaterial-ui

Move the button to the following line and center it. Ensure that the background image remains at full size

.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-text{ fon ...

htmlcsstwitter-bootstrap

Generating dynamic div elements in a Laravel blade template using a foreach loop

After receiving an object from the controller to the blade using compact, I am utilizing it in my blade file to display the data. <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> <!-- This must regenerate to print next 4 entries--> ...

phphtmllaravel

Retrieve hyperlinks from webpage

Currently, I am attempting to extract all Netflix movie/show links from this source , along with their respective country names. For example, I aim to retrieve information such as , USA, etc. Despite my efforts so far, the current code retrieves all links ...

pythonhtml

Can implementing $routeProvider help reduce data usage on a network?

Take a look at this $routeProvider configuration for the navbar and let's assume there is no caching involved app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl : 'pages/home.html& ...

htmlcssangularjsnode.jshttp

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

I'm in the process of developing a new website, and I'm still learning about PHP. Would it be more advantageous to use .html pages where buttons with Onclick would trigger JavaScript functions that redirect to a PHP page for database interaction ...

phphtml

Python // Regular Expressions // Categories

My attempt to retrieve specific text content from various HTML tags using BeautifulSoup (BS4) proved unsuccessful. The code snippet I used only managed to extract the first text item after the <td tag, leaving out the rest that I needed. My goal is to p ...

pythonhtmlregexbeautifulsoup

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Create a visual representation using a push button

Hey there, I'm attempting to create an image using a button on canvas. However, I'm facing an issue where I can't draw on the clear canvas. Here's my code: <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascripthtmlbuttoncanvasdrawimage

Steps to create a zigzagging line connecting two elements

Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...

javascripthtmlcsscss-transitionscss3pie

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

Creating links to external websites in PHP files

I'm currently developing a new website with PHP, and I’m facing an issue where all the URL links are directing users to 'localhost' instead of the correct IP address. This is causing a problem as they should be directed to the IP, not &apo ...

phphtmlhttpurllocalhost