I have this list in HTML
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
I want to put a background-color to my first link : 'Category 1' without affecting others links
Here's my CSS
.current_page_parent li:not(.children) a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
You can use first-of-type combined with a > combinator selector
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
li.current_page_parent:first-of-type > a{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
li.current_page_parent:first-of-type > a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
</ul>
</li>
<li></li>
<li></li>
</div>
You can add class propery to the particular <a> and directly select the particular attribute by their class name
Here's example:
HTML:
<div id="sideMenu">
<li class="current_page_parent">
<a class="notInULChildren" href="#">Category 1</a>
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
CSS:
.notInULChildren{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
FIDDLE
Related
Using wp_nav_menu, currently it's in three columns, what I need is two li's wrapped in a DIV and third wrapped in another DIV. If it can be done via CSS then that would be great, rather than custom wrapper class for the menu.
Not sure how to do this, so would appreciate some assistance. Thanks.
Edit: Added stylesheet, which is using flex.
==== ==== ====
to
==== ====
====
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex-grow: 1;
width: 33%;
}
<ul>
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</ul>
to
<ul>
<div class="col-2">
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
</div>
<div class="col-4">
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</div>
</ul>
If you aren't looking to change the HTML and just use CSS, then using CSS grid rather than flexbox might be what you are looking for.
ul {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 200px;
padding: 0;
list-style: none;
}
ul > li:last-of-type {
grid-column: 1 / 3;
}
ul ul,
ul ul li {
display: flex;
}
<html>
<ul>
<li>
One
<ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
</ul>
</li>
<li>
Two
<ul>
<li>2a</li>
<li>2b</li>
</ul>
</li>
<li>
Three
<ul>
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul>
</li>
</ul>
</html>
I want to change the background of "zxczxczxc" and "bbbbbb" to yellow. I try ul > li:first-child > a {
background: yellow;
} but it is not work. Any one have solution? thanks
Note: No add more class. It's must be css only.
<ul class="sub-menu">
<li>
<a>zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a>bbbbbb</a>
</li>
</ul>
Your Answer:
.link1{background-color:red}
.link2{background-color:Blue;
color:white;}
<li>
<a class="link1">zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a class="link2">bbbbbb</a>
</li>
</ul>
Buddy, you have a small typo in your code to set a background color we use background-color
body {
background-color: coral;
}
I Want to select last Element of div.container <ul> inside last <li> with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.
ul {
list-style: none;
margin: 0;
padding: 0;
}
<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
view the image that i want to select with css
You can use some tricks to make it.
If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.
This is achieved as it counts from the last child.
.container ul li:nth-last-child(1)
{
color: red;
font-size:22px;
}
.container li li {
color: green;
font-size:12px;
}
Look at here:
MyFiddel
Given the following structure, I want to select the first level of children (li) from the list (ul), but not the nested list.
ul.list > li {
background-color: red;
}
<ul id="list" class="list">
<li>first level</li>
<li>first level</li>
<li>
<h1></h1>
<div>
<ul>
<li>second level</li>
<li>second level</li>
</ul>
</div>
</li>
<li></li>
</ul>
(JSFiddle)
But that selects also the items (li) inside the div.
I want to select the first level of children (li) using only ONE css RULE. How?
css does not have a selector that would allow you to specify that all/none of the ancestor elements must match certain critieria (i.e. not be a list), you would need xpath for that.
but what you can do is the following:
ul > li {
// top level list item styles here
}
li ul > li {
all: initial;
// nested item styles here
}
See MDN all for documentation on resetting styles. You can also selectively unset specific properties.
you need to identify your first ul:
<ul class="my-list">
<li></li>
<li></li>
<li>
<h1></h1>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</li>
<li></li>
</ul>
then select it with ul.my-list>li
CSS
ul li div ul li {
/* Your styles here to override parent (if they are over 70% the same) */
}
You can add a class to the <li>s which contain second-level content and then exclude them from the main CSS query using the :not pseudo-class
ul.list > li:not(.level2) {
background-color: red;
}
<ul class="list">
<li>first level</li>
<li>first level</li>
<li class="level2"> first level with nested content
<h1>some title</h1>
<div>
<ul>
<li>second level</li>
<li>second level</li>
</ul>
</div>
</li>
<li>first level</li>
</ul>
What you have does work, you just need to style the inner li's too, as their background by default is transparent.
Note though, that some properties are inherited by default and will be picked up by the inner li's and needs to be set explicit, like the font color.
ul.list > li li {
background-color: black;
}
ul.list > li {
background-color: red;
color: blue;
}
ul.list2 > li li {
background-color: black;
color: yellow;
}
ul.list2 > li {
background-color: red;
color: blue;
}
<div>Sample 1</div>
<ul id="list" class="list">
<li>first level</li>
<li>first level</li>
<li>
<h1></h1>
<div>
<ul>
<li>second level</li>
<li>second level</li>
</ul>
</div>
</li>
<li></li>
</ul>
<hr>
<div>Sample 2</div>
<ul id="list2" class="list2">
<li>first level</li>
<li>first level</li>
<li>
<h1></h1>
<div>
<ul>
<li>second level</li>
<li>second level</li>
</ul>
</div>
</li>
<li></li>
</ul>
in your case the problem is background-color, the color is only applied on .list>li but childrens show parent's background.
to separate color, you need to add element (for example div or span)
.list>li>span{
background-color: red;
}
<ul id="list" class="list">
<li><span>first level</span></li>
<li><span>first level</span></li>
<li>
<h1></h1>
<div>
<ul>
<li>second level</li>
<li>second level</li>
</ul>
</div>
</li>
<li></li>
</ul>
I'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>