This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 4 years ago.
I have the following link structure for my categories:
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
Now I want only the current-cat class to change the color of it's a element:
#outer-section .outer-div ul .current-cat a {
color: red;
}
The problem is, that the children (cat-item cat-item-71) gets changed, too. How can I prevent that and change only the parent a of the current-cat?
Use the direct child selector: .foo > .bar
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first.
Documentation
.current-cat > a {
color: red;
}
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
Note that I didn't use the whole selector (#outer-section .outer-div ...) for the example since you only provided the HTML structure from the ul element.
You can use the > that will prevent the inheritance:
#outer-section .outer-div ul .current-cat > a {
color: red;
}
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
Related
How do I avoid tagging css to the below code. I've tried a few things e.g. tried first:child but that didnt seem to work. I would just like the outer lis to be red not the second lis within the parent li
li {
color: red;
}
<ul>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
```
Use direct child combinator > along with initial:
ul>li {
color: red;
}
ul>li>ul>li {
color: initial;
}
<ul>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
The reason you need to reset it on the inner lis is a) color is one of the inherited properties (any element will have the text color defined closest in its ancestor tree, unless it explicitly has a color set), and b) that ul>li will also match the inner lis.
you can use just classes to separate each one of them
.tagged-red {
color: red;
}
.untagged-red {
color: black;
}
<ul>
<li class="tagged-red">Tag this as red
<ul>
<li class="untagged-red">
Dont' tag this as color red
</li>
</ul>
</li>
<li class="tagged-red">Tag this as red
<ul>
<li class="untagged-red">
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
The child combinator > is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. (for more information about child combinator you can read this.
But in your case, This doesn't work, because inner <li> inherits color from outer <li>, and both turn red.
.outer{
color:red;
}
.inner{
color:initial;
}
<ul>
<li class="outer"> This shoud be red
<ul>
<li class="inner">
This shoudn't be red
</li>
</ul>
</li>
<li class="outer"> This shoud be red
<ul>
<li class="inner">
This shoudn't be red
</li>
</ul>
</li>
</ul>
For more read about inheritance in css, you can read this article
This question already has answers here:
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 2 years ago.
I use CSS Modules which generates random class names for my tags. How can I select an element of specific type without selecting descendants? So far I've tried to use selectors :first-of-type and :first-child like this:
.settings ul:first-of-type > i:first-child {
opacity: 0.5;
}
But the result is that my rule applies to every <i> element on my page.
HTML:
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
Use the CSS child combinator >:
.settings > ul > li > i {
opacity: 0.5;
}
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
The child combinator (>) is placed between two CSS selectors. It
matches only those elements matched by the second selector that are
the direct children of elements matched by the first.
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
This question already has answers here:
Combining :last-child with :not(.class) selector in CSS
(2 answers)
Closed 6 years ago.
How can I select last li that doesn't have the .hidden class?
I have HTML and CSS like this:
ul li:last-child:not(:first-child):not(.hidden) button {
background-color: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
At the current moment, there is no CSS way of being able to find an element that is then followed by another specific element.
Possibly soon, there will be the CSS Relational Pseudo-class :has() which will make what you want possible. This is currently in the CSS Selectors Level 4 Draft and looks unlikely to be rolled out across any browsers any time soon.
A demo is below but don't expect it to work until the Selectors 4 Draft is at least in Working Draft.
Keep an eye on CanIUse to see when it becomes readily available.
ul li:has(+ .hidden:last-child),
ul li:last-child:not(.hidden) {
background: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
:has() is available in jQuery though, so here's a jQuery alternative
Read more here from the Official jQuery Docs
$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
The CSS :nth and :last-child pseudo selectors can only work with tags and not other selectors like :not or class but if there is always going to be only one .hidden li at the end, then you could use something like this:
li:nth-last-child(2) { background: lightblue; }
<ul>
<li>1</li>
<li>2</li>
<li class="hidden">3 hidden</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hidden">4 hidden</li>
</ul>
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>