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.
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.
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
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}
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/
I have a list with multiple sections. I try to make it look like a kind of tree. It started quite well but I can't fix the last bits.
The code can be found at:
http://jsfiddle.net/Kwfpm/
Here is how it should work
The first "Datorer", "Mjukvara" and
"Microsoft" should be connected to
the tree with a horisontal line.
"Mjukvara" at the bottom left should
be connected to "Kategorier".
There are some repeated problems but these should be solved if the two above is solved.
Here is a link what it should look like (without the collapsing things):
Open and close to see the tree:
http://jquery.bassistance.de/treeview/demo/prerendered.html
Info
I don't know how many levels there are.
The HTML can't be changed because its generated by Wordpress
Use backgrounds or borders to show what you got.
If JSfiddle don't work you can use this:
CSS
* {
margin: 0;
padding: 0;
}
.sidebar > ul > li {
background: none;
}
li {
padding-left: 20px;
list-style: none;
background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0;
color: #333;
font-family: Arial;
font-size: 13px;
line-height: 22px;
}
li a {
color: #555;
}
li:last-child {
background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px;
}
HTML
<div class="sidebar default">
<ul>
<li id="categories-10" class="widget widget_categories">
<h4 class="title">Kategorier</h4>
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="categories-10" class="widget widget_categories">
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Have a look at this javascript treeview: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/
It does have a same structure as you prefer with li's and ul's. Maybe you could take a look at it with firebug.
I figured it out. Here is a working code:
http://jsfiddle.net/Kwfpm/3/
The red borders can be changed to a background image horizontal lines.