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>
Related
List categories:
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
I removed <li data-value="6379" class="option"></li> List from Wordpress Dashboard and now i get this:
How is displayed
I try to hide that with CSS:
1. ul.list li.option:nth-of-type(5n+0) {display: none !important;}
2. ul.list li.option:nth-child(5) {
display:none;
}
3.ul.list li.option:nth-of-type(1n+4) {display: none;}
How to remove that field from the dropdown?
This works for me, you needed nth-child(6) because its the 6th item!!
ul.list .option:nth-child(6) {
display:none;
}
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
</ul>
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>
I am trying to use first-of-type to style only the first .menu element in this layout...
.menu:first-of-type
{
background:red;
}
<div id="container">
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
</div>
</div>
It is applying the background color to all, where am I going wrong?
This is because :first-of-type makes the rule apply to every element that is first of the type within its parent element. You need to capture the first section element and then style the menu element like so:
section:first-of-type .menu
{
background:red;
}
:first-of-type targets first child of specific type. As these elements have different parents, the all are first childs. You can prevent this by adding class to <section> and using it for that:
.menuSection:first-of-type {
background: red;
}
<div id="container">
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
</div>
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>
Here is my problem is there a way to wrap WordPress UL submenu to div?
WordPress output is this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</li>
</ul>
And I need to get this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<div class="wrap">
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</div>
</li>
</ul>
Using $.fn.wrap:
$('.sub-menu').wrap('<div class="wrap">');