The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with:

<div class="parent">
    <div class"routeA">
        <div class="header">
            <li></li>
            <li class="p-highlight"></li>
            <li></li>
        </div>
    </div>
    <div class="parent">
        <div class="content">
        </div>
    </div>
</div>

My goal is to style the .content section in two ways:
- When .p-highlight is not associated with the first li, I want the border-radius to be 6px.
- When .p-highlight is paired with the first li, I need the border-radius to be 0px on top and 6px on the bottom.

Can this be achieved?

csssass

Answer №1

Absolutely, you can achieve this with the rule provided below. Keep in mind that the :has() pseudo class may not be fully supported by all browsers such as Firefox, Opera, and Chrome for Android. You can verify compatibility at caniuse.com

Additionally, I have included a border to the .content element so you can observe the impact.

.content {
  border: 1px solid black;
  border-radius: 6px;
}

.parent:has(li:first-child.p-highlight) .content {
  border-radius: 0 0 6px 6px;
}
<div class="parent">
  <div class="routeA">
    <div class="header">
      <li class="p-highlight">One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
  </div>
  <div class="routeB">
    <div class="content">
      Content
    </div>
  </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

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

htmlcsshtml-listscenterpadding

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

javascriptcssvue.js

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

cssreactjsreact-routercreate-react-app

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

Run a Javascript function two seconds after initiating

My goal is to implement a delay in JavaScript using either setInterval or setTimeout, but I am facing an issue where the primary element is getting removed. Code that works fine without Javascript delay: const selectAllWithAttributeAdStatus = document. ...

javascripthtmljquerycssajax

Empower the parent container to wrap around its child elements using Flexbox

I am trying to make the flexbox parent item adjust its width based on the children, but currently it is stretching out to full width and leaving empty space on the right side. Here is the CSS code I have tried: .flexParent { display:flex; background:# ...

htmlcssflexbox

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

csscss-animations

I need the sidebar to be visible across all interfaces

https://i.stack.imgur.com/iEgAF.png I have developed a website for employee monitoring with six interfaces. The first interface is for sign-up, the second for logging in, the third for creating projects, the fourth for displaying projects, the fifth for c ...

cssvue.jsvuetify.js

What is the best way to start with maximum padding when in full screen mode, and then gradually decrease to minimum padding as the browser width decreases?

Trying to adjust my padding with the formula padding-left: clamp( 60px, calc( value - value ), 186px) but struggling to resize it correctly as I reduce my browser width ...

htmlcssfrontendweb-frontendclamp

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

javascripthtmlcss

I am experiencing difficulties with my HTML and CSS code not functioning as I had initially intended

I've been dabbling in HTML and attempting to create my own website, but I'm encountering an issue with the positioning of my <table> tag. It keeps appearing at the bottom of the site, despite my CSS instructions to prevent it. The position ...

htmlcss

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...

htmlcsssublimetext2shortcut

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

javascripthtmlcssajaxfullcalendar

Display an Open Dialog window when a Button is clicked

On a button click, I need to display an Open Dialog box. To achieve this, I am utilizing the FileUpload control for file uploading purposes, however, I prefer not to expose it to the user and would rather display a Button instead. ...

jquerycssfile-upload

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

javascriptcssember.js

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile