The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be causing this issue, I would greatly appreciate your input.

.parent .target {
     border: solid red;
}
<div class="parent">
  <div class="child"> 
     <div class="grandchild">
         <div class="target"></div>
         <div class="great-grandchild"></div>
     </div>
   </div>
</div>

htmlcss

Answer №1

.parent .target {
     border: 1px solid red;
}

It is essential to specify the border height in your code. Additionally, there seems to be a syntax issue where you should use double quotation marks " between class names instead of using fancy quotes like “.

.parent .target {
     border: 1px solid red;
   
}
<div class="parent">
         <div class="child"> 
           <div class="grandchild">
              <div class="target"></div>
              <div class="great-grandchild"></div>
          </div>
         </div>
       </div>

Answer №2

After conducting a thorough test on the CSS descendent selector, I can confirm that it is indeed functioning properly.

Upon reviewing your HTML snippet, it seems that there is a mix of quote styles present, causing a display issue. To rectify this, I recommend going through your HTML code and ensuring consistent use of quote styles throughout.

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

Only one active class is allowed in the Bootstrap Accordion at any given time

I have implemented Bootstrap's accordion on my webpage, consisting of two different sections with unique content. Upon loading the page, the active class defaults to the first element of the first section. However, if I navigate to the "Second" sectio ...

javascriptjqueryhtmlcssbootstrap-4

Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox. For instance, in my Behat code: Then I press ".topmember-resultList .resultListIte ...

cssseleniumfirefoxbehat

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

javascripthtmlcssvue.js

Can CSS blend with elements beyond the stacking context?

I am currently in the process of constructing a "hero area" for my webpage through a CMS. This hero area will feature a background image, text content, and a couple of button links. My goal is to have the buttons utilize the mix-blend-mode:multiply propert ...

cssblendingmix-blend-mode

SVG: spin the entire text

I need assistance rotating a list of words at an angle, specifically tilting only the characters: Here is my code: <svg width="2000" height="130"> <g *ngFor="let fruit of fruits"> <g> <text [attr.x]="fruit.x" ...

cssangularjssvg

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

jquerycssdomtraversal

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

This situation has been incredibly frustrating for me!! Let me explain what's going on - I have a callback data coming from my AJAX post method that needs to be passed to seven different HTML tables. Although I successfully received the data from the ...

javascriptphphtmlajaxsymfony

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

htmldompdf

Is it possible to apply identical css styles to multiple ids at once?

Is there a way to accomplish this? .apple, .orange, .kiwi h1 {color: #892828;} I'm having trouble making it work. Any suggestions? ...

css

Incorporating PlayN games into an HTML/JS application

I've been considering creating a game using PlayN. While it's great for the game itself, I would rather handle menus, navigation, high-score lists, etc in HTML (possibly with GWT). If I develop a game using PlayN, are there ways to integrate it ...

javahtmlgwtplayn

Show a table when a button is clicked using Javascript

Undertaking a project called: Tennis Club Management involving javascript, HTML, CSS, and bootstrap. The project includes a Login Page (index.html) and a Manage Players Page (managePlayers.html). Within the managePlayers.html, there are two buttons - Add P ...

javascripthtmlbootstrap-4

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson

Dealing with Sideways Overflow Using slideDown() and slideUp()

Attempting to use slideUp() and slideDown() for an animated reveal of page elements, I encountered difficulty when dealing with a relatively positioned icon placed outside the element. During these animations, overflow is set to hidden, resulting in my ico ...

javascriptjqueryhtmlcss

Which tag is best to use for applying a CSS style to a section of text?

When it comes to styling text, I usually opt for one of the following methods: <span class="header">...</span> <div class="header">...</div> <p class="header">...</p> <label class="header">...</label> Howeve ...

htmlcss

Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it ...

cssrshiny

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...

javascriptjqueryhtmldomjquery-mobile

Is there a way to duplicate the background-style:contain effect on an image?

It is important to note that the image source must be declared in the HTML code as it will be dynamic, and therefore background cannot be used here. HTML <div class='some-form'> <form> <button>...<button> <i ...

htmlcss

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

javascripthtmlangular

Unable to transform Table layout into DIVs

My form for data input consists of labels with inputs, but the labels are localized so I am not sure about the length of text for different languages. To tackle this issue, I initially used a table layout: <table> <tr> <td> ...

htmlcsshtml-table