There is one monolithic data block of the UL.
How to use CSS to split a list of UL with multiple LI LVL1 into three columns with the same height?
Each LI has different heights.
The number of LI blocks is always different.
<div class="div_list">
<ul class="list">
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">
<ul>
<li class="list_li_lvl2">...</li>
<li class="list_li_lvl2">...</li>
</ul>
</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
</ul>
</div>
EDIT:
I'm close to the answer, but LVL2 goes to the next column.
EDIT 2:
Solution found DEMO
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)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 2 years ago.
.nav-list :first-child :first-child{
font-weight:bold;
}
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
I have the nav menu below where I'm trying to target the following css:
.nav-list:first-child:first-child{
font-weight:bold;
}
I was hoping to turn 'Home' bold but nothing happens
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
Here you go-
.nav-list > li:first-child > a:first-child{
font-weight:bold;
}
You specify the :first-child to the child element, and not the parent. Also, > selector selects the direct child(ren).
https://jsfiddle.net/cmxna7vg/
.nav-list > li:first-child{
font-weight:bold;
}
You need to specify that you want to search elements only at the first level of nesting by ">", and then specify that that element must be first child.
I am trying to style specific elements of a nested list, without using classes. Specifically, looking at the example below, how would I style ONLY the 'SubList Item' elements with a colored background, but NOT any of the 'Main List', 'SuperSub List' and 'SuperDuperSub List' items?
<div>
<ul>
<li><a>Main List Item</a></li>
<li><a>Main List Item</a>
<ul>
<li><a>SubList Item</a></li>
</ul>
</li>
<li><a>Main List Item</a></li>
<li><a>Main List Item</a></li>
<li><a>Main List Item</a>
<ul>
<li><a>SubList Item</a></li>
<li><a>SubList Item</a>
<ul>
<li><a>SuperSub List</a></li>
<li><a>SuperSub List</a>
<ul>
<li><a>SuperDuperSub List</a></li>
<li><a>SuperDuperSub List</a></li>
</ul>
</li>
</ul>
</li>
<li><a>SubList Item</a></li>
<li><a>SubList Item</a></li>
</ul>
</li>
<li><a>Main List Item</a></li>
</ul>
</div>
This was a way to do it based off your markup although I personally would say use classes if possible.
div > ul > li > ul > li > a {
background: #000;
}
I want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
How would I style a <li> element with id="mathi" so that I can stylize a menu with three elements?
I would like to give each one a separate background in both parent and child menus.
<ul id="MyMenu">
<li id="mathi">info 1
<ul class="inner">
<li>apple1</li>
<li>mango1</li>
<li>banana1</li>
</ul>
</li >
<li id="mathi">info 2
<ul class="inner">
<li>apple2</li>
<li>mango2</li>
<li>banana2</li>
</ul>
</li>
<li id="mathi">info 3
<ul class="inner">
<li>apple3</li>
<li>mango3</li>
<li>banana3</li>
</ul>
</li>
</ul>
You can't have multiple elements with the same id. If you need each of the lists to have similar formatting with slight differences then you could apply a class to each element.
<ul id="MyMenu">
<li id="math1" class="math">info 1
<ul class="inner">
<li>apple1</li>
<li>mango1</li>
<li>banana1</li>
</ul>
</li >
<li id="math2" class="math">info 2
<ul class="inner">
<li>apple2</li>
<li>mango2</li>
<li>banana2</li>
</ul>
</li>
<li id="math3" class="math">info 3
<ul class="inner">
<li>apple3</li>
<li>mango3</li>
<li>banana3</li>
</ul>
</li>
</ul>
then for CSS:
.math{
/* common formatting */
}
#math1{
background-color: ...;
}
#math2{
background-color: ...;
}
#math3{
background-color: ...;
}