Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet:

 <div class="car">
    <div class="make">NISSAN</div>
    <div class="model">MICRA</div>
</div>
<div class="discontinued">
    <div class="car">
        <div class="make">FORD</div>
        <div class="model">MONDEO</div>
    </div>
</div>
<div class="car">
    <div class="make">HONDA</div>
    <div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
    <div class="make">PEUGEOT</div>
    <div class="model">206</div>
</div>
<div class="car">
    <div class="make">TOYOTA</div>
    <div class="model">COROLLA</div>
</div>

I'm trying to figure out how to select all the car makes except for those inside a div with the class discontinued.

I attempted to use the following CSS selector:

div:not(.discontinued) .make

...unfortunately, even FORD was still getting selected.

htmlcsscss-selectors

Answer №1

To style all elements with the class .car but not within the .discontinued class, use the :not pseudo-class selector along with the direct child selector to then style all elements with the class .make inside.

:not(.discontinued) > .car .make {
  color: red
}
<div class="car">
  <div class="make">NISSAN</div>
  <div class="model">MICRA</div>
</div>
<div class="discontinued">
  <div class="car">
    <div class="make">FORD</div>
    <div class="model">MONDEO</div>
  </div>
</div>
<div class="car">
  <div class="make">HONDA</div>
  <div class="model">INTEGRA</div>
</div>
<div class="car">
  <div class="make">PEUGEOT</div>
  <div class="model">206</div>
</div>
<div class="car">
  <div class="make">TOYOTA</div>
  <div class="model">COROLLA</div>
</div>

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

CSS to resolve HTML alignment problems

I am new to HTML and CSS, trying to practice formulating a few things but my efforts are proving futile. Below is the code and images for your reference. I would appreciate your opinion. .container { display: block; width: 200px; height: 120px; } ...

htmlcss

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

style of placing a space between objects

Is there a way to create space between the border (underline hover effect) and have the color of the line be red? a { text-decoration: none } li { display: inline; } li:hover { text-decoration: underline; } <li><a href=""> abc < ...

htmlcssunderline

Styling the <div> element to create a unique rotation and tilt aesthetic

Would anyone be able to guide me on how to recreate the tilted style of the header section shown in the image using HTML and CSS? https://i.sstatic.net/mhJWA.png body { margin: 0px; background-color: #FFEF4C; } #header { background-color: #FF35 ...

htmlcss

Activate the child for an update

Welcome! I am a newcomer to Angular and would greatly appreciate any assistance. The parent component of my picker has the ability to create various rules for each option. However, these rules are dynamic and can change frequently. I need to ensure that ...

htmlangulartypescript

Using HTML5 canvas to draw circles with additional metadata stored in variables

I'm designing a seating chart that will indicate spots with circles and show a tooltip on mouseover with the person's first name, last name, and possibly other details. I plan to use Kinetic.JS for region/tooltip support based on the tutorials I& ...

javascripthtmlcanvasdraw

Tips for incorporating a variable into an action link for HTML and Flask

I am completely new to using Flask and HTML. Currently, I am working on developing a user management tool that includes buttons to perform various actions within Flask. One of the functionalities I am trying to implement is a button that allows users to ...

pythonhtmlflask

send data to a hyperlink

I need to pass a parameter to the href based on the first name in the list. The names are links to another page that I retrieve via an _id passed in the URL. The issue I am facing is that the id is not being passed to the URL, resulting in an error. How ...

javascripthtmlnode.jsexpress

What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...

htmlcssnavigation

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

htmlyii2radiobuttonlist

Concealing HTML content with a modal overlay

There are security concerns with my authentication overlay modal, especially for users familiar with CSS and HTML. Is there a way to hide the HTML behind the modal so it doesn't appear in the page source? The code below is just an example of a modal ...

javascriptjqueryhtmlcss

Updating HTML Pages with Dynamic Content

Dealing with a massive project consisting of 50,000 pages (20,000 aspx forms, 10,000 asp forms, and 10,000 html pages) can be overwhelming. With only 2 days to complete the task of adding content after the body tag on all pages, I am seeking advice on ho ...

javascriptjqueryhtml

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

A guide on traversing a HTML table and cycling through its contents with JavaScript

I'm currently in the process of constructing a grid with 20 rows and 20 columns of squares, but I am encountering difficulties with looping through table values to effectively create the grid. For more detailed information on the html code, please se ...

javascripthtmlcss

Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on. After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to " ...

jqueryhtmlcss

Tips for abbreviating HTML content using PHP

Similar Question: PHP: Truncate HTML, ignoring tags I have some HTML content stored in a database. I need to display this content in a shortened form. I attempted to use the mb_strstr function like so; $str = mb_strstr($this->htmlData, "</p> ...

phphtml

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

javascriptcssreactjsmaterial-uistyled-components

Tips on how to customize an HTML form submission appearance

Take a look at my file upload form below: <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> </form> I am trying to figure out ...

htmlcss

Ways to identify when the scroll bar reaches the end of the modal dialog box

I have been working on a modal that should display an alert when the scrollbar reaches the bottom. Despite my efforts to research a solution, I am struggling to detect this specific event within the modal. The desired outcome is for an alert to pop up once ...

javascripthtmljquerycssscrollbar

Elevate your design game by mastering CSS transformations for precise element

I am trying to center a div with a variable width using the following code: div { background: red; max-width: 400px; position: absolute; left: 50%; transform: translateX(-50%); } Check out my demo here While this code works well for centering, ...

csscenteringtranslateresponsive