This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 29 days ago.
I'm trying to get to the .dropdown::after element but only if the first child has the attribute x-placement set to bottom-start.
<div class="dropdown js-dropdown">
<ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start"
...
</ul>
<button class="btn dropdown-btn js-dropdown-btn">
Enter salutation...
</button>
::after
</div>
It seems to me that something like this should work, but unfortunately neither solution will work:
.js-dropdown [x-placement^=bottom] ~ ::after {
background: red;
}
.js-dropdown [x-placement^=bottom] + ::after {
background: red;
}
Is this even possible?
.js-dropdown [x-placement^=bottom] ~ ::after {
background: red;
}
.js-dropdown [x-placement^=bottom] + ::after {
background: red;
}
Sure you can, use the CSS :has() pseudo class:
.dropdown::after { content: "I'm an after pseudo element"; }
.js-dropdown:has([x-placement="bottom-start"])::after {
background: red;
}
<div class="dropdown js-dropdown">
<ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start">
<li>...</li>
</ul>
<button class="btn dropdown-btn js-dropdown-btn">Enter salutation...</button>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 months ago.
Let's say our html structure looks like this:
<div class="parent">
<div class="child"></div>
</div>
Now on some button action I add active className to child's div.
My question is:
How to style only parent element if child's div has active className
// CSS pseudo code //
if(child.has.className('active')
.parent{
background: red;
}
You can use the :has() pseudo class selector, although that's only supported in newer browsers. Otherwise you'll probably need to use JS.
.parent {
background: #ccc;
}
.parent:has(.active) {
background: steelblue;
color: #eee;
}
/* Ignore below, for stylistic purposes only */
.parent {
margin: 1rem;
padding: 1rem;
border-radius: .5rem;
font-family: Arial, sans-serif;
}
<div class="parent">
<div class="child">Child</div>
</div>
<div class="parent">
<div class="child active">Child (active)</div>
</div>
For a JS-based solution there are two ways:
Recommended: in the code that adds the active class, you also toggle a class on the parent, say has-active-child and style it accordingly
Not recommended: listen to class changes on the child node using MutationObserver API and style the parent node
At the moment not all browsers support the pseudo class selector :has() as Terry explained. A JavaScript solution goes as following.
Example from GeeksForGeeks
$('ul li:has(ul.child)').addClass('has_child');
.parent > li > ul > li {
background:orange;
}
.parent > li.has_child {
background:red;
}
.parent li {
background:blue;
color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.parent li {
background:blue;
color:black;
}
.parent > li > ul > li {
background:orange
}
.parent > li > ul > li > ul >li {
background:pink;
}
</style>
</head>
<body>
<ul class="parent">
<li>I am first</li>
<li>I am second</li>
<li>I am third</li>
<li>I am forth</li>
<li>I have kids.
<ul class="child">
<li>child1</li>
<li>child2
<ul>
<li>child2.1</li>
<li>child2.2</li>
<li>child2.3</li>
</ul>
</li>
<li>child3</li>
<li>child4</li>
<li>child5</li>
</ul>
</li>
<li>I am sixth</li>
<li>I am seventh</li>
<li>I am eight</li>
</ul>
</body>
</html>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I am able to target the "next" siblings using the ~ operator, but the previous sibling are not being targeted.
In the fiddle bellow, if you hover Menu items 1, 2 and 3 then the red font is removed. However if you then hover menu items 4 and 5 then the red font is visible. Is it possible with CSS to hide the red font no mater which menu item is hovered? I thought the sibling ~ selector would work for this but it seems to only target the next siblings.
HTML:
<ul>
<li class="sub-menu">Active Menu 1</li>
<li class="sub-menu">Active Menu 2</li>
<li class="sub-menu active-menu">Active Menu 3</li>
<li class="sub-menu">Active Menu 4</li>
<li class="sub-menu">Active Menu 5</li>
</ul>
CSS:
.sub-menu {
color: #000;
}
.active-menu {
color: red;
}
.hover {
color: pink;
}
.hover ~ .sub-menu {
color: #000;
}
https://jsfiddle.net/hubvill/bqkpywxj/12/
You cannot target previous siblings with CSS but you wan rework your logic to something like this
(setting all items to black on :hover of the container)
.menu-container:hover .sub-menu {
color: black;
}
.menu-container .sub-menu {
color: #000;
}
.menu-container .active-menu {
color: red;
}
.menu-container .sub-menu:hover {
color: pink;
}
<div class="menu-container">
<div class="sub-menu">Active Menu 1</div>
<div class="sub-menu">Active Menu 2</div>
<div class="sub-menu active-menu">Active Menu 3</div>
<div class="sub-menu">Active Menu 4</div>
<div class="sub-menu">Active Menu 5</div>
</div>
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I have a navigation item in a div, I just want to target this one with an attribute value, But my CSS does not work so far. Code so far below is:
I am trying to target the navDepts class
HTML
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->
</ul>
</div>
</div>
CSS
.primary-nav [data-name="about"] .subNav ul .navDepts {
display: none!important;
}
Try removing ul from your CSS. Because ul and .navDepts are on the same level.
.primary-nav[data-name="about"] .subNav .navDepts {
display: none!important;
}
Your CSS inheritance is not proper:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<!-- <li></li>-->sadsadsad
</ul>
</div>
</div>
I found two mistakes in your code.
First one is that there should not be any space between attribute selector and related class.
Second, I presume that you mean to select ul with .navDepts class. So I removed the space between them.
So here is the corrected css:
.primary-nav[data-name="about"] .subNav ul.navDepts {
background: red;
width: 100px;
height: 100px;
}
.primary-nav[data-name="about"] .subNav ul.navDepts li{
background: yellow;
}
<div class="primary-nav" data-name="about">
<div class="subNav">
<ul class="navDepts">
<li>list item</li>
</ul>
</div>
</div>
Add this CSS . May it will help you out.
.primary-nav [data-name="about"] >.subNav ul.navDepts {
display: none;
}
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security" class="footer-icons">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text {
color: red!important;
}
But this is not working maybe someon could help me out on this?
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text {
color: red !important;
}
Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text {
color: red !important;
}
Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
I like the :nth-child(n) selector:
a.ui-btn-active > span:nth-child(1) {
background: red;
}
Is there a way of using css pseudo-class to accomplish this: I need to add the class name of the child span (high) to the parent li?
thanks
<li class="emergency" style="background-color: #FE9D9D;">
<span class="high">250</span></li>
You cannot do this with CSS.
You can with JQuery however.
$(document).ready(function () {
$('li.emergency').each(function () {
var newClass = $(this).find('span').attr('class');
$(this).addClass(newClass);
});
});
Demo
Or you can set the background colour of the span instead. display: block; will make the span full width.
HTML
<ul>
<li class="emergency">
<span class="high">250</span>
</li>
<li class="emergency">
<span class="low">100</span>
</li>
</ul>
CSS
span {
display: block;
}
span.high {
background: red;
}
span.low {
background: green;
}
Demo