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.
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 1 year ago.
I am working in a CMS. first-child selector not working as there is a div inside the ul. When i remove the div in console, first-child selector applies. I cant change the DOM nor use JS. So what would be the solution. Thanks in advance.
ul.tab-list li:first-child img{
max-width: 145px;
height: 59px;
}
<ul class="tab-list">
<div></div>
<li class=" tab-list-element">
<a href="#">
<img src="Logo.png" alt="Logo">
</a>
</li>
<div></div>
<li class=" tab-list-element">
<a href="#">
Link Text
</a>
</li>
</ul>
To select the <img> inside the <li> that is the subsequent sibling of the <div> that is the first child of a <ul>:
ul > div:first-child + li img {
// ...
}
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 1 year ago.
Ok, so I've got a little trouble here, I'm creating a div that'll be the child of another div and will be the parent of
•ul,
•obviously li &
p elements
my trouble is that I need to style every first child starting with the first div, I know that :first-child pseudo-class will make the trick, 'cause I've used it too much, given this markup fragment
div>ul,
p:first-child {
border: 4px solid red;
}
<div>
<div>
<ul>
<ul>
<li>
<p>Item 1</p>
<p>Item 2</p>
</li>
<li></li>
<li></li>
<p>Yesterday</p>
<p>Today</p>
<li></li>
<li>
</li>
<li>
</li>
<li>
<p>Item 3</p>
</li>
<li>
<p>Item 4</p>
</li>
</ul>
</ul>
</div>
</div>
I can't really understand why Chrome DevTools apply the styles but grays me out the p:first child selector in the console, as seen in this image
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>
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>
assuming i have a structure like this (and can't modify it):
<ul>
<li class="common"> <p>First A</p> </li>
<li class="common"> <p>Second A</p> </li>
<li class="common"> <p>Third A</p> </li>
<li class="common"> <p><b>SELECT ME</b></p> </li>
<li> <p>First B</p> </li>
<li> <p>Second B</p> </li>
<li> <p>...</p> </li>
</ul>
Is there a way to select the last element with class "common"? (in this case the fourth element)
First i tried selecting a subset with:
.common{
background: red;
}
and it worked correctly. So i tried selecting last-child of them, with:
.common:last-child{
background: green;
}
but not luck. i also would like to avoid adding a class for that element.
Jsfiddle
EDIT: i simplified classes and selectors to make it cleaner
Is there a way to select the last element with class "common"?
No, not with a CSS selector without modifying the HTML.
what about
.common:last-of-type {
background: green;
}
You can use JavaScript or jQuery
$('custom').prev().css('color', 'red');
If your not against a JS route you could do this
$('li.common.custom').first().prev('.common').css('background','yellow');
It finds the first element that has both .common and .custom classes and then goes to the previous element. So its technically the last element that only has .common
https://jsfiddle.net/89z20341/
Is the structure going to stay exactly as you have coded it? eg with the bold tags on the element you want to select?
if so could you just do this
.common p b{
background: green;
display:block;
}
http://jsfiddle.net/seLm589s/4/