I'm using SharePoint Designer and I would like to apply a custom bullet on the parent li (Desc 1 and Desc 2) of my list, but what's happening is that it is being applied on all the list items including the children li. Can someone help me with it? how it should be done correctly in CSS? Thanks.
.tab-content.content-show ul li {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
To select the direct children and not the grandchildren, you can use ">" as shown below
.tab-content.content-show div > ul > li {
list-style-image: url(/img.png);
}
And no need for 2nd class.
here is the customized css:
.tab-content.content-show div > ul > li {
background: url("https://www.kindpng.com/picc/m/313-3131657_blue-bullets-icon-png-transparent-png.png") left center no-repeat;
background-size:20px;
padding: 0 0 0 40px;
}
You were pretty close. Your CSS should look like this:
.tab-content.content-show div > ul > li {
list-style-image: linear-gradient(to left bottom, red, blue);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
The Child Selector (>) applies the CSS rules to the direct children of the particular element.
See this related answer: https://stackoverflow.com/a/4830672/801544
Note I've used a gradient instead of an image just to show that it works, but you can use any image instead.
you should use "ul:first-child" in css:
.tab-content.content-show ul:first-child > li{
list-style-image: url(https://www.w3schools.com/cssref/sqpurple.gif);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
Do you have access to the HTML code? If yes I would put a class on the li you are interested in.
<li class="custom-bullet">Desc 1</li>
.custom-bullet {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li is going to match li elements that are children of li elements … which is not allowed in HTML.
Just use child combinators instead of descendant combinators in the first place.
.tab-content.content-show > div > ul > li {
list-style-image: url(http://placekitten.com/20/20);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
You can change your css to following way
.tab-content.content-show > Div > ul > li {
color:red;
}
see the jsFiddle
As well as you can set unique class both and and set colors accessing that class like following
.html
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="Desc1">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="Desc2">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.css
.tab-content.content-show .Desc1{
color:red;
}
.tab-content.content-show .Desc2{
color:green;
}
see the jsfiddle
The best way to solve this problem is to give parent list items a class attribute and you style that class.
li.parent {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.tab-content.content-show ul li.parent {
list-style-image: url(/img.png);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class='parent'>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class='parent'>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
Related
This question already has answers here:
What does an asterisk (*) do in a CSS selector?
(5 answers)
Closed 4 years ago.
My question is about asterisk sign between css selectors. It seems asterisk can ignore selectors by the number of asterisks between two elements.
Example 1 :
ul * li {
color:red;
}
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Example 2 :
ul * * * li {
color:red;
}
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Example 3 :
ul * * * * * * * li {
color:red;
}
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Please consider my question is about asterisk between two elements and its behavior is different when use as selector *.
Can anyone explain how how this happens?
Thanks in advance.
The * is the universal selector. It matches any element.
It is being applied in conjunction with the descendant combinator.
So ul * li means "a li that is a descendant of any element that is a descendant of a ul". Or, in other words, "a li that is a descendant of a ul but not a child of the ul that the ul part of the selector matched".
In the below example is it possible to have the grid item's height be based off content and pushed to the top? I tried setting some grid-template-rows and grid-auto-flow but that doesn't seem to work either.
So it would look like this:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
list-style: none;
max-width: 500px;
}
.wrapper > li {
border: 1px solid black;
}
<ul class="wrapper">
<li>
Heading
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li>
Heading
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li>
Heading
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Heading
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Heading
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Heading
<ul>
<li>Item 1</li>
</ul>
</li>
<li>
Heading
</li>
</ul>
Without changing the HTML, which pains me, how do I only select the parent of an unordered list for CSS?
I have something like the following:
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
I need to grab only Item 1 for altering it's CSS. I've attempted things like:
ul li a - won't work because it will grab Item 2
ul li a - won't work because it will grab Item 2
ul.navigation li - won't work because it will grab Item 2
ul:first-child - won't work because it will hit Item 1 and Sub Item A
Any thoughts?
You can do it like this:
.navigation > li:first-child > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
Or like this:
.navigation > li:first-of-type > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
This is how I'm displaying a nested list jsFiddle. As you can see the 'columns' are not aligned correctly as the content has different length. The elements - as example - should be at the right border.
Is it possible to get the width of each 'column' in a relative or fixed size? The complete list should have a 100% width.
Visibly I want to get this: https://jsfiddle.net/bsrms9ax/2/
ul {
display: inline-table;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
<li>Longer Main Title
<ul>
<li>Long Title 1
<ul>
<li>Element 1</li>
<li>Elem 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
I edited the code from Display nested list like a table , also a post by you.
If this is not you want, i will do as much i can to modify it and make it work.
// ADD SOME CODE
// www.Agary.info Agario server ;-)
// BEST LUCK IN YOUR CODE BRO
body>ul {
display:table;
}
li {
display: flex;
display: -webkit-inline-flex;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<html>
<!-- Added some css..-->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
</head>
<body>
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
<li>
</li>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
EDIT: I see that this is not what you want, but maybe will be useful for any other user. I will try to modify it :)
Is this HTML structure valid?
<ul class="blog-category">
<div class="three column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div class="three column">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
<div class="three column">
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</div>
</ul>
I am inserting li's inside div which is within ul. What do you think? Is this stucture semantically valid and will that be recognized as a single list?
No, div is not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3C or check the corresponding article on W3C:
4.5.6 The ul element
Categories
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes
DOM interface:
interface HTMLUListElement : HTMLElement {};
Instead you could use
<ul class="blog-category">
<li class="three column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="three column">
<ul>
<li>Item 4</li>
...
</ul>
</li>
</ul>
<div>'s aren't technically valid inside of <ul>'s. W3 validator returns this result:
Element div not allowed as child of element ul in this context
It would make more sense to group the code you have different, such as:
<div class="blog-category">
<ul class="three-column">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</div>
No, this is not valid, neither in HTML4, nor in XHTML or in HTML5.
If you'll validate this against the w3c markup validator you'll probably get something like:
Element div not allowed as child of element ul
More about lists can be found here.
It is valid also do the following:
<ul>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
<div>Title</div>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I've checked in http://validator.w3.org/check