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

Update in slide height to make slider responsive

My project involves a list with text and images for each item: <div class="slider"> <ul> <li> <div class="txt"><p>First slogan</p></div> <div class="img"><img src="http://placehold.it/80 ...

javascriptjqueryhtmlcss

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: Now, how can I style the tabs to look like this: This is my current code: <b-card no-body> <b-tabs card> <b-tab title="Tab 1" active& ...

javascriptcssvue.jsvuejs2bootstrap-vue

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

javascriptjqueryhtmlcss

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

jquerycss

Is there a way to prevent a link from activating when I click on one of its internal elements?

Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if th ...

javascripthtmlcssreactjsnext.js

Issues with jQuery animate not functioning properly when triggered on scroll position

I found a solution on Stack Overflow at this link, but I'm having trouble implementing it properly. The idea is to make an element change opacity from 0 to 1 when the page is scrolled to it, but it's not working as expected. The element is locat ...

jquerycss

What steps can be followed to incorporate a loading gif into this popup and subsequently eliminate it?

These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could ...

jquerycssloadinganimated-gif

Issue with deploying responsive background image on Github platform

My responsive background image isn't displaying properly on mobile devices after I deployed my project to Github. Although it appears correctly under the Google Chrome inspect mobile tool, when accessed live on a mobile device, the image covers the ba ...

cssgithubresponsive-designbackground-imagematerialize

Use JQuery to reverse the most recent button click

Here is the code snippet I am working with: <button class="btn">New York</button> <button class="btn">Amsterdam</button> <button class="btn">New Jersey</button> <button class="btn&qu ...

javascripthtmljquerycssjquery-plugins

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

javascriptjqueryhtmlcss

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui

Having issues with the tailwindcss transformation not functioning properly, but the problem seems to resolve when directly incorporating it into the

Lately, I decided to start utilizing tailwindcss and I have noticed that certain properties do not seem to function at all. However, when I incorporate them into my CSS directly, they work perfectly fine. Allow me to provide an example. const Step = styled ...

cssreactjsstyled-componentstailwind-css

Utilize a personalized container for Bootstrap 4 dropdowns

I'm currently working on a Megamenu using Bootstrap 4 dropdown functionality. My goal is to implement a custom container like <div class="dropdown-container"> to control the visibility of the dropdown content, instead of relying on Bootstrap&ap ...

jquerydrop-down-menusassbootstrap-4megamenu

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

htmlcssfont-face

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

htmlcssfooter

Permitting the user to remove an option from the antd select widget

I have integrated the antd select component in my React application and I am looking to add a delete option for users. For more details, please refer to the image below: This is how I attempted to implement it: {tasks.map((task) => { return ( ...

cssreactjsselectantd

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

htmlcss