I have the following ul list:
<ul class="list">
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<ul>
How can I apply CSS style to last li of parent class="list", not for nested ul inside ul
You need last-of-type and >
.list > li:last-of-type {
color: red;
}
<ul class="list">
<li>a
<ul>
<li>a</li>
</ul>
</li>
<li>c</li>
</ul>
As you mention that you want last element of li's parent you use last-of-type selector, which matches every element that is the last child of a particular type, of its parent.
Second, to only match the outer most li and not nested one's, you use the child selecor > which in this case says: match the last of type which is an immediate child of an element having a class named .list
You also want to have a look at this.
try this
demo
css
ul.main > li > ul> li:first-child > a {
background:green;
}
DIRECT CHILD SELECTOR (CSS3):
ul.list >li:last-of-type{
color:red;
}
<ul class="list">
<li>Parent First Child
<ul>
<li>Child</li>
</ul>
</li>
<li>Parent Another Child</li>
<li>Parent Last Child</li>
<ul>
Note : > is used for selecting direct child of ul.list
Here is the details about CSS Pseudo-classes
Related
I have HTML code like this
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
and i want to style every 'a' of odd 'li' only of first 'ul'
i am doing it like this
ul>li:nth-child(odd)>a{background:#000}
what is mistake here ???
because it also taking 'a' of sub 'ul'
Test if the parent is not an li
:not(li) > ul > li:nth-child(odd) > a {
background: red
}
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
ol li{
color: blue;
}
ol ol li {
color:black;
}
ol ol {
list-style: upper-alpha;
<ol>
<b><li>Topic 1</li></b>
<ol>
<li> Sub Topic 1</li>
<li> Sub Topic 2</li>
<li> Sub Topic 3</li>
</ol>
<b><li>Topic 2</li></b>
<b><li>Topic 3</li></b>
<ol>
<li>Sub Topic 1</li>
<li>Sub Topic 2</li>
<li>Sub Topic 3</li>
</ol>
</ol>
Simple question I hope. The first level of an <ol> is always a heading. Trying to style
ol li {
font-size:larger;
}
without changing ol ol li or other children.
So much thanks!
Edit:
HTML structure is
<ol>
<b><li>Topic</li></b>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<b><li>Topic 2</li></b>
</ol>
The goal is to remove the need for the bold tags.
It's a bit unclear what you are asking: "The first level of an ol is always a heading" - Do you really mean a heading like <h1>, <h2> etc., or do you mean that you want to apply a special styling to the first <li> inside every <ol> tag ?
In the latter case, you can use a :first-child selector, like
ol > li:first-child {
font-size:larger;
}
In case you want to apply a special styling to any first child if every <ol> tag, you can use the general * selector, combined with :first-child
ol > *:first-child {
font-size:larger;
}
(Although I doubt that anything else than an li as a direct child of an ol would be valid HTML)
Addition after edit of question:
Since your ol will be inside some other element, you can use the following selector to adess only direct ("first-level") children of the ol. (I applied a class to the parent element and used that in the selector)
.parent>ol>li {
font-weight: bold;
}
<div class="parent">
<ol>
<li>Topic</li>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<li>Topic 2</li>
</ol>
</div>
If it is inside a certain container always (for example .container), you can do so:
.container > ol > li {
font-size:larger;
}
Here it would only apply it to direct child ol and that only to direct child of that.
I have a nested unordered list with one "li" element defined with identifier: [data-main]
1 (must be selected)
1.1
1.2
2
using the following html:
<ul>
<li data-main>1 (must be selected)
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
I'm trying to find the right CSS selector for selecting only element 1 without its children: 1.1 and 1.2. Selectors, I tried:
li:not([data-main]) - selects all li except main, but i need something opposite
[data-main]:not(:nth-child(1)) - selects nothing
https://jsfiddle.net/DaViking/dtqhag2t/
What you're not realising is that the [data-main] selector in your JSFiddle demo is selecting only that top-level li element. The problem you're facing here is that this li element contains the other li elements. Those aren't selected by this selector individually, but they are contained within the element which is selected:
If you want to style just the text held within the [data-main] element but not within the ul element contained within it, you'll need to override the [data-main] style declarations:
[data-main] {
color: red;
}
[data-main] ul {
color: initial;
}
<ul>
<li data-main>1 (must be selected)
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
If you want to place a border around the "1 (must be selected)" text and nothing else, you can wrap that text in a span element and apply styling to that instead:
[data-main] span {
border: 1px solid red;
}
<ul>
<li data-main>
<span>1 (must be selected)</span>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
I'm trying to use :not() to ignore the .current class in the first list item.
HTML:
<ul>
<li class="current">Home</li>
<li><a href="#">Page 2</a</li>
<li>Page 3</li>
</ul>
CSS:
ul li a:not(.current){color:red}
I can't get the :not() to ignore the .current class.
I have also tried:
ul li a:not(.current a){color:red}
Fiddle
the :not applies to element in use, so apply to li which is using current in this case
plus, not sure if was a typo, but in your second li, the a was missing a < in closing tag
ul li:not(.current) a {
color:red
}
<ul>
<li class="current">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
Your class is on the li element in your html so:
ul li:not(.current) a { color: red; }
should work.
If I have a child inside a div with an id, for example, id="mother", how correctly to write css?
Example:
1) #mother ul li {...}
or
2) mother ul li {...}
Is there a difference? The second example I saw when MOTHER had a class name, not id.
Your first approach is the right one
when you have:
HTML:
<div id="mother">
<ul>
<li>first child</li>
<li>secondchild</li>
</ul>
</div>
CSS:
#mother ul li {
color:red;
}
Your second approach have to change like this:
div ul li {
color:red;
}
mother is a type selector. It matches <mother>
#mother is an id selector. It matches elements with id="mother".
.mother is a class selector. It matches elements with class="mother and-possibly-other-classes".
See the selectors specification for more.
First one is correct with using id, second one is for class but with a 'dot' in-front of class name.
eg1:
HTML
<div id="div1">
<ul>
<li></li>
.........
.........
<li></li>
</ul>
</div>
CSS
#div1 ul li{
}
eg2:
HTML
<div class="div1">
<ul>
<li></li>
.........
.........
<li></li>
</ul>
</div>
CSS
.div1 ul li{
}