is there any way to select last appear of a specific element with css?
this is an example: DEMO
i tried last-child but this is not what i want. i used this class:
HTML:
<ul>
<li><span>test</span></li>
<li>
<span>test</span>
<span>test</span>
</li>
</ul>
<div>
<span>test</span>
<span>test</span>
</div>
<p>
<span>test</span>
<span>red</span>
</p>
CSS:
span:last-child{
color:red;
font-weight:bold;
}
i want the last span with "red" content to be red. how i can do it with css ?
update:
there is a solution with last-of-type for elements with same parents. but what about different parents ?
Try this: (you should be aware of the parent wrapper element)
body > *:last-child > span:last-child{
color: red;
}
Working Fiddle
Related
So I just read that I can target previous sibling elements with the :has(+ ) pseudo-class.
I went and did implement the following rule. Unfortunately, this is not working. Am I wissing somethin?
p {
margin: 2rem;
}
p:has(a[class*="link--button"]):has( + p:has(a[class*="link--button"])) {
margin-bottom: 0;
}
<div>
<p>
<a class="link--button" href="#">first link</a>
</p>
<p>
<a class="link--button" href="#">second link</a>
</p>
</div>
You may also find the code in jsfiddle
Here is also another article The CSS :has() selector is way more than a “Parent Selector mentioning it
The :has() pseudo-class cannot be nested;
However. I think p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) meets what you're trying to do.
Note that using margin-bottom results in an unclear test, because the bottom margin of the first p element will collapse with the top margin of the second p element anyway.
So I've added a color declaration to show that the selector is working.
p {
margin: 2rem;
color:red;
}
p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) {
margin-bottom: 0;
color:green;
}
a {
color:inherit
}
<div>
<p>
<a class="link--button" href="#">first link</a>
</p>
<p>
<a class="link--button" href="#">second link</a>
</p>
</div>
I have a page full of elements. I simply just want to match the first element in my CSS selector.
I have tried sibling selector, first-child and first-of-type but they all only work in a structure where there are siblings. In my case I have different depths which makes it harder.
.match ~ .match {
background:red;
}
.match:first-child {
background: green;
}
.match:first-of-type {
background: yellow;
}
<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>
It should find the first element with the class .match.
I will not accept answers like div > div > .match because then it does not find the element because we tell it where to look.
That is not possible with pure CSS. If the HTML is static, you can add an ID or another class, as Snake_py suggested. If you're okay with using a script, the document.querySelector method returns the first match of the selector, so you could do something like this: (see snippet)
document.querySelector('.match').classList.add('match-active')
.match-active {
background:red;
}
<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>
I'm trying to style all elements inside a class while excluding a specific one and it's children. I've made several attempts using the :not() selector but I could not achieve what I want. Any thoughts?
<div class="orange">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div class="list">
<ul>
<li> li text 1</li>
<li> li text 2 </li>
</ul>
</div>
</div>
Here is the link with the html and the styles.
https://stackblitz.com/edit/js-p7krtp?file=style.scss
Use ">" the child combinator:
.orange {
> :not(.list){
color: orange
}
}
This selects all children of .orange that do not have the .list class.
What best worked for me while trying to find a solution for this approach was trying it out in a fiddle. I find the accepted answer not exactly correct because the syntax should be:
.orange > :not(.list)
{
background-color: orange;
}
I have this html code:
<div class='ui'>
<h3 class='title'>
<a href='#'>Link to Header</a>
</h3>
</div>
<a href='#'>Another link</a>
I want to set a CSS style for all anchors a, but not the one that are into an h3 element that is parent of div.ui. I cannot add a class to the anchor a into h3 element.
I try this one:
a:not(:parent:parent.ui){color:#dedede;}
but this not work.
Any solution?
As Kobi noted in a comment, there is no such :parent selector.
Instead I suggest you style all a tags, then style a tags within h3 tags within a different rule:
a {
color: #dedede;
}
.ui h3 a {
color: another color;
}
I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link
Your selector is #countdown .num:last-child.
Your HTML is
<ul ID="countdown">
<li> <div ID="days" class="num">00</div> <div CLASS="text">days</div> </li>
<li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div> </li>
<li> <div ID="mins" class="num">00</div> <div CLASS="text">minutes</div> </li>
<li> <div ID="secs" class="num">00</div> <div CLASS="text">seconds</div> </li>
<div class="clear"></div>
</ul>
Think: is .num the last child of its parent? Answer: no.
Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.
Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).
The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:
#countdown li:last-of-type .num,
#countdown li:last-of-type .text{
border:0;
}
Check this http://jsbin.com/apuhep/4/edit#html,live
Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.