Here is my code as simple as possible for convenience.
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
<html>
<head>
</head>
<body>
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
</body>
</html>
So I have tried to follow this code example from this webiste and do the same with my code, but it didn't worked.
Could you explain to me why? And show me the correct way ?
Because element with id #hidden is child and not sibling of the element with id #visible. You can use Descendant selector:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
References
Adjacent sibling selectors
It doesn't work because you are using the adjacent sibling selector (+). #hidden is a descendent of #visible so no intermediary selector is required:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
Your current selector would work for a similar structure to the following, which is obviously invalid:
<ul>
<li id="visible">
Names
</li>
<ul id="hidden"> /* #hidden is now a sibling of #visible */
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</ul>
Related
This solution isn't going to work since I have no control over adding a class/id to the ul element: Get first level li from ul
Given that the parent ul has no id/class, can css be written to target only the first level li? If not, how could it be done?
This is the html:
<ul>
<li id="acomment-62" class=" comment-item" data-bp-activity-comment-id="62">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-65" class=" comment-item" data-bp-activity-comment-id="65">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-63" class=" comment-item" data-bp-activity-comment-id="63">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-66" class=" comment-item" data-bp-activity-comment-id="66">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-64" class=" comment-item" data-bp-activity-comment-id="64">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-67" class=" comment-item" data-bp-activity-comment-id="67">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
You can do that with CSS alone. There's a few ways you can do it. Here is one of them and a working codepen so you can mess around with it yourself.
HTML
<ul>
<li>Item 1</li>
<li>Item with list 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item with list 2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub List
<ul>
<li>Sub list item 1</li>
<li>Sub list item 2</li>
<li>Sub list item 3</li>
</ul>
</li>
</ul>
</li>
<li>Item 5</li>
CSS
li {
color: red;
}
li li {
color: initial;
}
I'm not sure how supported this is but you could apply the style to all li and then override that style to target any descendant li
EG.
li li {
color: initial;
}
li {
color: red;
}
<ul>
<li>A</li>
<li>B</li>
<li>
C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
<li>D</li>
<li>E</li>
</ul>
This question already has an answer here:
Select :last-child with especific class name (with only css)
(1 answer)
Closed 2 years ago.
Would like to access item 6 only through css
<div class="div-class">
<li class="li-class">Item 1</li>
<li class="li-class">Item 2</li>
<li class="li-class">Item 3</li>
</div>
<div class="div-class">
<li class="li-class">Item 4</li>
<li class="li-class">Item 5</li>
<li class="li-class">Item 6</li>
</div>
EDIT
I think that it is duplicate. Select :last-child with especific class name (with only css)
So you need which div you want to point. In this case, this is second div so we specified:
div:nth-child(2)
And then we just select last li as below:
li:last-child
So finaly we got:
div:nth-child(2) li:last-child{
background-color: red;
}
EDIT
With jQuery:
$('li').last().css('background', 'red');
Just to let you know, your html structure is incorrect as you should set li right after ul or ol
$('li').last().css('background', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
Would the following CSS selectors select the same elements?
ul > li[class="a"] { }
vs
ul > li.a
Would the following CSS selectors select the same elements?
No they don't. Notice how in the below example the last element isn't selected by ul>li[class="a"] because that selector will select element having only a as a class.
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
</ul>
Even whitespace count:
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
<li class="a ">Item 3</li>
</ul>
Both selectors work the same:
#one ul>li.a {
color: red;
}
#two ul>li[class="a"] {
color: orange;
}
<div id="one">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
<div id="two">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
This is a mock up of a menu i have
HTML
Menu 1 (overflow:hidden)
<div class='menu'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 2 (overflow:hidden; overflow-y visible)
<div class='menu menu2'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 3 (overflow-x:hidden;)
<div class='menu3'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 4 (overflow:visible;)
<div class='menu menu4'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
CSS
.menu {border:1px solid #000000; overflow:hidden;}
.menu ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu li {display:inline-block}
.menu li::after {content: " | ";}
.menu ul ul {position:absolute}
.menu ul ul li {display:block;}
.menu2 {overflow-y:visible}
.menu4 {overflow:visible}
.menu3 {border:1px solid #FF0000;overflow-x:hidden}
.menu3 ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu3 li {display:inline-block}
.menu3 li::after {content: " | ";}
.menu3 ul ul {position:absolute}
.menu3 ul ul li {display:block;}
Fiddle
Now the idea is that menu item 1 has a sub menu which is triggered to appear via javascript and the submenu is supposed to go outside the box. because this menu is supposed to be responsive i assume the overflow was set in the template for a reason and i want to avoid altering the template as much as i can.
Now as you can see with the code the submenu in Menu 1 is hidden in the box, when i go to override the overflow-y property in Menu 2 to be it's default value (which is the same as overflow's) it's still hidden and there's a scroll box.
now just in case if there was something weird in overflow is still set for the y axis i went and copied the menu class for Menu 3 but instead of doing overflow:hidden i just did overflow-x:hidden; but that still have be a scrollbar. Menu 4 shows how if overflow is set to visible (the default value) i have no scroll bar and my submenu goes out of the box as it should.
My question is why doesn't overflow-y:visible look the same as overflow:visible? to my understanding, overflow:visible is just overflow-x:visible; overflow-y:visible much like how border:1px solid #000000 is the same as setting all the border sides's width, style and color one by one
overflow-x and overflow-y are part of CSS3 (while plain overflow is CSS2), and are still somewhat experimental. The rules for what happens when one value is a "scrolling value" (which includes hidden) and the other is visible are complex, and frankly confusing.
From the CSS3 Overflow Spec:
... if one cascaded values [sic] is one of the scrolling values and the other is ‘visible’, then computed values are the cascaded values with ‘visible’ changed to ‘hidden’.
This seems to justify the behavior you're seeing, but I don't understand why it was designed that way.
overflow: visible;
does not clip content and can be shown out side of content box but for
overflow-y; visible;
content clipped against content box with overflow auto default
I made a revised fiddle but the main issue I found is that the style for .menu was applied to all four menus and that part of its definition was overflow: hiddden, so you were basically getting a conflict with Menu 2. Deleting overflow: hidden from .menu in the first line of your CSS makes both Menu 2 and Menu 4 have the same behavior as you were expecting.
i have got a nested list, which is positioned under the parent list:
<ul>
<li> Item 1 </li>
<ul>
<li> Subitem 1 </li>
<li> Subitem 2 </li>
<li> Subitem 3 </li>
</ul>
</ul>
Is there any way to style them with css so that the nested list is right and centered to the parent list? The result should look like this:
- Subitem 1
Item 1 - Subitem 2
- Subitem 3
Best regards
You can try a tabular approach:
.list {
display: table;
}
.list > li, .list > ul {
display: table-cell;
vertical-align: middle;
}
<ul class="list">
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</ul>
However, note that the HTML above is invalid, because the inner ul should be a child of li.
With a correct layout, I would use an inline-block approach:
.list > li > ul {
display: inline-block;
vertical-align: middle;
}
<ul class="list">
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
</ul>