Here I have created a ul li list with float:left for each li tag. And added float:none; inline property for every third li. I want to make it with condition using CSS only.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style:none;
}
ul li
{
margin-right:10px;
float:left;
}
</style>
</head>
<ul>
<li>List 1</li>
<li>List 2</li>
<li style="float:none;">List 3</li>
<li>List 4</li>
<li>List 5</li>
<li style="float:none;">List 6</li>
<li>List 7</li>
<li>List 8</li>
<li style="float:none;">List 9</li>
<li>List 10</li>
<li>List 11</li>
<li style="float:none;">List 12</li>
<li>List 13</li>
<li>List 14</li>
</ul>
<body>
</body>
</html>
You would use ul li:nth-child(3n) to target every third li element.
EXAMPLE HERE
ul li {
margin-right:10px;
float:left;
}
ul li:nth-child(3n) {
float:none;
}
If you wanted to get fancy, you could use :not() to exclude the third li elements from the initial styling and avoid having to overwrite float:left.
EXAMPLE HERE
ul li:not(:nth-child(3n)) {
float:left;
}
li:nth-child(3n){
float:none;
}
add this to css instead of inline style. Is that what you are looking for?
ul {
list-style:none
}
ul li
{
float:left;
position:absolute;
}
here if set the child class like li mean its take separate .
Related
I know that greater than (>) sign/slector will select exact child and not nested one
but in this example all <li> getting black BG
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
CSS:
#content > ul li {
background: black;
color: white;
}
as per rule black BG shouldn't be for Sub list item but here its applied to all <li> (should be just for List Item With)
http://jsfiddle.net/4j1zv25b/
Your current code selects any li within the first level ul. The child list li tags are still descendants of the first ul so get styled. You need to also use select the direct descendant of the ul:
#content > ul > li {
background: black;
color: white;
}
However, you also have the issue that all child lists are inside of that styled li. The child elements don't have a background or color set so the background is transparent and the color is inherited. You need to apply a new background and color to override those styles.
#content>ul>li {
background: black;
color: white;
}
#content li li {
background: white;
color: black;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
The behaviour you've described is correct, because your asking the direct ul child of #content, to style it's Li's with that behaviour.
Just because you've given that Li some children, does not negate its effects. Because the children are within the scope of the original targeted Li, they will be styled according to their parent.
I've attached a potential variant that you may be looking for, which should style just the first li within the sub categories.
I've also attached another example, which might better illustrate my point. Imagine a Div, with another Div inside of it, and inside the child div, there is a paragraph tag.
If you style the direct child of the first div, you would expect the paragraph tag to still have a black background, because it's parent is the targeted div. The p doesn't apply opposite styling to compensate, because why would it?
#content>ul li {
background: black;
color: white;
}
#desired>ul li ul li:first-child {
background: black;
color: white;
}
#example > div {
background: black;
color: white;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="desired">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="example">
<div>
<p>Still styled</p>
</div>
</div>
The greater than symbol (>) selects the direct child of the parent but grandchildren will still inherit from it.
To select the garndchild you would need ul li ul li or ul > li > ul > li
You can also use child selectors like:
:first-child
:nth-child(n)
:last-child
See more about CSS selectors here https://www.w3schools.com/cssref/css_selectors.asp
why dont you select the inner list items also
#content > ul li {background: black;
color: white;}
#content > ul li li {
background: white;
color: black;
}
I usually use ::after to add a pseudo-element, which add after the content of the element:
.clear-after:after
{
content: '.';
display:block;
height:0;
overflow:hidden;
clear:both;
}
Is there a way to add the pseudo element after the element where I apply the class instead of after the content of the element where I apply the class?
Because if I have a list of 10 items and a grid of 3 column, I could avoid to add a clear DOM/HTML element (div) every 3 items (usually done server-side) and just do the job with CSS.
You can't add an ::after element after the element itself, but for your specific "clear every third item" case, ::nth-child can help:
html {
font-family: helvetica, Arial, sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: 33.333%;
text-align: center;
margin: 0;
padding: 0;
}
li:nth-child(3n+1) {
clear: both;
}
<ul>
<li>List element 1</li>
<li>List element 2<br />Some more</li>
<li>List element 3</li>
<li>List element 4</li>
<li>List element 5</li>
<li>List element 6</li>
<li>List element 7</li>
<li>List element 8</li>
<li>List element 9</li>
</ul>
We have eBook, in that one of the list has strike through the text as well as the bullet. i can able to strike the text using (text-decoration: line-through;). But i can strike through the bullet in the list, please help me to get a solution?
Here is one way to implement
with Order list
HTML :
<body>
This fiddle is used to demonstrate the list styling with CSS
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
</body>
and CSS :
ol li
{
list-style-type: none;
counter-increment: item;
text-decoration:line-through;
}
ol li::before
{
content:counter(item) ".";
text-decoration:line-through;
}
With unordered list, it is a little bit more complicated
HTML:
<body>
This fiddle is used to demonstrate the unordered list styling with CSS
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
and CSS:
ul{
float:left;
}
li {
list-style: circle;
list-style-position: inside;
margin-top:8px;
}
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree.
For example, I have a list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="holder">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li class="holder">
<ul>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="holder">
<ul>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And this is my CSS:
li{
background: gray;
border: 1px solid;
display: block;
margin: 2px;
}
.holder{
background: none;
border: none;
}
/*replace these styles*/
li > ul > li{
background: white;
}
li > ul > li > ul > li{
background: gray;
}
li > ul > li > ul > li > ul > li{
background: white;
}
If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.
Please check : http://jsfiddle.net/bCU34/6/
CSS selectors allow you to select all named elements of a parent node by separating the named element from the parent element with a space. To select all unordered list elements, for example, you would do like below. Notice all ul elements at any depth inherit the style no bullets/margin/padding. In order do style nth layer for an element type, you need to use the parent selector >. See below. I used font color but you could set background images the same way. Note there is no decendant level selector at this time that I know of. This was addressed on another post CSS select nested elements up to N levels deep.
.container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container > ul > li {
color: green;
}
.container > ul > li > ul > li {
color: red;
}
.container > ul > li > ul > li > ul > li {
color: blue;
}
<section class="container">
<h1>CSS Nested List Styling</h1>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li>
<h4>Foo</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
<li>
<h4>Foo Bar</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li>
<h4>Hello</h4>
<ul>
<li>
<h5>World</h5>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
There isn’t any specific way of doing this currently with Selectors level 3, and the current draft of Selectors level 4 doesn’t seem to add anything either. I had a dig through the www-style mailing list and came up with this post by Lachlan Hunt from April 2005 that suggests that an :nth-descendant() style selector had been considered but never specified.
I'm building simple site from Drupal but the primary and submenu are not aligned center as it should. I have tried many of CSS3 properties but none of them is working.
This is how it structured
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2</li>
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
</ul>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
I want to display both of primary and submenu to be horizontal and align center with CSS3, how can I do that, please provide completely new CSS code for me please.
Thank you very much.
I hope you are looking like this :-
HTML
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
<li>Submenu 2.4</li>
</ul>
</li>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
CSS
.nav ul {
background:lightgrey;
}
.nav ul li {
display:inline-block;
margin:0 5px;
position:relative;
}
.nav ul li ul {
display:none;
padding:0 10px;
}
.nav ul li:hover ul {
display:block;
position:absolute;
left:0;
top:19px;
right:0;
}
.nav ul li ul li {
display:block;
margin:5px 0;
padding:0;
}
Demo