CODEWITHSUNDEEP
htmlcsscss-selectors
Adam
Adam

Reputation: 2517

add style to the last child of the last child

enter image description here

This is an image of my code. I have a footer-container inside which there are several footer-content classes, each of which contains a <p> tag and then a <span> tag. I want to apply a style to span of the last footer-content

This is what it looks like I want to remove the last - after risk analysis enter image description here

I have tried this

.footer-container:last-child :last-child { display: none; }

but this hides all the span tags

Upvotes: 0

Views: 1753

Answers (6)

soalrib
soalrib

Reputation: 599

Try this:

.footer-container .footer-content:last-child span {
    /* css here */
}

Upvotes: 0

connexo
connexo

Reputation: 56744

Edit: To create those dashes between your entries, instead of creating those span.footer-dash at all, you can do that using CSS only: 

.footer-content:not(:last-child) .footer-item::after { 
  content: "-";
  color: #666;
  padding: 0 20px;
}

Apply styling as needed. The selector makes sure the dash isn't added after the last element at all, so no need to hide anything if it's not there in the first place.

:last-child asks Am I the last child of my parent?, not Who is my last child element? (which your selector suggests you think).

So either use the descendant selector (space):

.footer-container :last-child :last-child  {
  display: none;
}

or use it on the correct child elements:

.footer-content:last-child :last-child  {
  display: none;
}

Please note that usage of :last-child should be made carefully as it ties your stuff very closely to the DOM structure (which you might want to change later).

I'd suggest you change it like this:

.footer-content:last-child .footer-dash  {
  display: none;
}

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

/* Selects any <p> that is the last element
   among its siblings */
p:last-child {
  color: lime;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

Upvotes: 4

Rohan Kawade
Rohan Kawade

Reputation: 473

I think this should help you

.footer-container .footer-content:last-child{
	background-color:red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Css practice</title>

</head>
<body>
   
   <div class="footer-container">
	<div class="footer-content">
	<p><span>Section Number 1</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 2</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 3</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 4</span></p>
	</div>
	
   </div>
</body>
</html>

Upvotes: 1

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

You can just add:

.footer-container .footer-content:last-child .footer-dash  {
  display: none;
}

As per the Q - I want to remove the last - after risk analysis

This will just work fine for you. This will also prevent other elements from being affected by your :last-child CSS selection if you change the order of the content inside the .footer-content.

Upvotes: 0

D. Pardal
D. Pardal

Reputation: 6587

This code should work:

.footer-container:last-child>:last-child  {
  display: none;
}

Using a space will target all the elements that are last children inside .footer-container:last-child, while using > will target the last child of .footer-container:last-child only.

Upvotes: -2

Johannes
Johannes

Reputation: 67748

That selector should be

.footer-container :last-child :last-child { ... }

(space after .footer-container)

Upvotes: 2

Related Questions