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>
Related
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;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How to vertically align an image inside a div
(37 answers)
Vertically align text next to an image?
(26 answers)
Why doesn't vertical-align work properly when using float in CSS?
(3 answers)
Closed 4 years ago.
I have the following structure/code:
.navbar__brand, .navcontainer {
float:left;
}
.navbar__brand img {
vertical-align:middle;}
.navbar__menu {
display:inline-block;
}
.navbar__menu li {
display:inline-block;
list-style: none;
}
<div class="header">
<div class="navbar">
<div class="navbar__brand">
</div>
<div class="navcontainer">
<ul class="navbar__menu">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
</div>
</div>
I want the image in navbar__brand to be vertical align in the middle;
At this moment is align at the top of the div.
I need to support old IE browser so please no flex.
The easiest way to achive this is simulating a table
.asTable{
display:table;
}
.asTR{
display:table-row;
}
.asTD{
display:table-cell;
vertical-align:middle;
border:1px solid;
}
.asTD ul{
list-style:none;
}
.asTD ul li {
display:inline-block;
}
<div class="asTable">
<div class="asTR">
<div class="asTD">
</div>
<div class="asTD">
<ul class="">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
</div>
</div>
(Edit)
Thanks #TemaniAfif for pointing out that you need to support old IE browsers. This answer won't work in old browsers.
As usual, what is a pain to achieve with classic CSS (floats, inline-block, clearfix, etc.) is a breeze with Flex :
.navbar {
display: flex;
align-items: center;
border: blue dashed 2px;
}
ul.navbar__menu {
display: flex;
}
.navbar__menu li {
list-style: none;
padding: 10px;
}
<div class="navbar">
<div class="navbar__brand">
</div>
<ul class="navbar__menu">
<li><a href=#>Item 1</a></li>
<li><a href=#>Item 2</a></li>
</ul>
</div>
I'm trying to build a simple drilldown in Bootstrap. When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.
Here's the basic HTML:
<div class="container">
<ul class="nav nav-drilldown" id="Menu">
<li>
Thing the first
<ul class="collapse" id="a">
<li>child 1</li>
<ul class="collapse" id="a-child-1">
<li>
<div class="row">
<div class="col-md-6">something</div>
<div class="col-md-3">goes</div>
<div class="col-md-3">here</div>
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
And the CSS:
.nav-drilldown:focus {
background-color: #eee;
}
.nav-drilldown li li a:focus {
background-color: #FF0000;
}
.nav-drilldown li a:focus {
background-color: #eee;
}
For the second level, on the text part of the anchor changes background color. I get that you can't set selected on a <li>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.
Level 1:
Level 2:
JSFiddle
I believe this is just a matter of the padding on the anchor tag. At the top level, you have 10px top and bottom padding and on the second level anchor tag, you have no padding. So, if you want similar behavior, you could add:
.nav-drilldown li li a {
padding: 10px 15px;
}
I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
I'm trying to create a horizontal list from a nested list markup, as an example I have the current markup:
<ul>
<li class="alone">List Item 1</li>
<li class="alone">List Item 2</li>
<li class="alone">List Item 3</li>
<li class="group">List Item 4
<ul>
<li class="not_alone">List Item 4a</li>
<li class="not_alone">List Item 4b</li>
<li class="not_alone">List Item 4c</li>
<li class="not_alone">List Item 4d</li>
</ul>
</li>
<li class="alone">List Item 5</li>
</ul>
I would like to achieve something similar to this:
<style>
div { display: inline-block; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<div class="wrapper">
<div class="alone item">List Item 1</div>
<div class="alone item">List Item 2</div>
<div class="alone item">List Item 3</div>
<div class="group item">
List Item 4
<div class="group item">List Item 4a</div>
<div class="group item">List Item 4b</div>
<div class="group item">List Item 4c</div>
<div class="group item">List Item 4d</div>
</div>
</div>
<div class="alone item">List Item 5</div>
</div>
You can see a demo here http://jsbin.com/exivi5.
Is this possible using the existing nested list markup? Also, can I also keep the width of the ul parent list to 100% so it fits the entire viewport?
This needs to be compatible in FF, Webkit and IE7+ but will settle for IE8+ support.
Thanks in advance!
try adding these css rules:
ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;}
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;}
ul li ul {float:right;}
h2 {clear: left;}
with a bit of fiddling with margins & paddings it should look the same as yours
Try this (requires jQuery):
var wrapper = $("body").append("<div id='wrapper'></div>").find("#wrapper");
var lis = $("ul > li");
lis.each(function() {
var li = $(this);
if (li.hasClass("alone")) wrapper.append("<div class = 'alone item' >" + li.text() + " </div>");
else if (li.hasClass("group")) {
var html = "<div class='group item'>";
li.find("li").each(function() {
html += "<div class = 'group item' >" + $(this).text() + " </div>";
});
html += "</div>";
wrapper.append(html);
}
});
Demo: http://fiddle.jshell.net/EJZMS/show/light/
Code: http://fiddle.jshell.net/EJZMS/
My code is not recursive: If you have more than one level of nesting, you will need to modify it yourself.
If you add the style
display:block;
The li's will render as block level elements, and you should then be able to style them up just like the Div based example. You might need to float them left to get them next to each other exactly like your example page. (or use inline-block instead of block perhaps)
Try this (I haven't tested this as I'm on my little laptop - this is based on memory / guesswork)
<style>
#horizontallist li { display: block; float:left; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<ul id="horizontallist">
<li class="alone item">List Item 1</li>
<li class="alone item">List Item 2</li>
<li class="alone item">List Item 3</li>
<li class="group item">List Item 4
<ul>
<li class="group item">List Item 4a</li>
<li class="group item">List Item 4b</li>
<li class="group item">List Item 4c</li>
<li class="group item">List Item 4d</li>
</ul>
</li>
<li class="alone">List Item 5</li>
</ul>