0

here is my html

.user-container div.user-left:last-child{
  color:red;
}
.user-container div.user-right:last-child{
  color:red;
}
<div class="user-container">
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text. this is user left last</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text. this is user right last</div>
</div>

is there any way to change font color of last child of class 'user-left' and class 'user-right' using CSS ? in here user-right:last-child working but user-left:last-child not working.any idea?

사드루완
  • 51
  • 4

6 Answers6

4

You should enclose user-left into specific container left and user-right to right

Because last-child selector works only in parent container :)

.left div:last-child {
  color:red;
}
.right div:last-child {
  color:red;
}
<div class="user-container">
  <div class="left">
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text. this is user left last</div>
  </div>
  <div class="right">
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text. this is user right last</div>
  </div>
</div>
Zhenya Telegin
  • 589
  • 2
  • 9
1

It's not the last child, because the user-right divs are also children of the same parent. The selector you would want is :last-of-type but that only works on elements, not by class. I don't think you can do it in pure CSS without changing the html structure. The other answer -- using nth-last-child -- will only work for your example. It breaks as soon as you add or remove any elements.

You can find more information here: CSS: How to say .class:last-of-type [classes, not elements!]

Community
  • 1
  • 1
Devon Sutherland
  • 498
  • 2
  • 6
0

try this 

   .user-container div.user-left:nth-last-child(5) {
    background: red;
   }
0

Use the :last-of-type pseudo selector of css

.user-left:last-of-type, .user-right:last-of-type { color: red; }

Jrey
  • 1,618
  • 2
  • 17
  • 34
  • The last-of-type not working for classname. From http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:last-of-type The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element. Because it has to be a sibling, it ignores classnames probably because then you can mix it up with other elements. – ToujouAya Apr 26 '17 at 02:01
  • @사드루완 I update my answer, just add the `.user-left` class, sorry i fotgot to include that class. – Jrey Apr 26 '17 at 02:24
0

TRY THIS OUT: HTML PART:

<div class="user-container">
<ul>
<li>Some text.</li>
<li>Some text.</li>
<li>Some text.</li>
<li">Some text.</li>
<li class="lastLeft">Some text. this is user left last</li>
<li>Some text.</li>
<li>Some text.</li>
<li>Some text.</li>
<li class="lastRight">Some text. this is user right last</li></ul>
</div>

CSS PART:

.user-container ul li.lastRight {
color:red;
}
.user-container ul li.lastLeft {
color:red;
}
Riyaz Ansari
  • 1
0

try using ~ selector, :has and :not

.user-container > div.user-left:not(:has(~.user-left)) {
  color: red;
}

.user-container > div.user-right:not(:has(~.user-right)) {
  color: red;
}
baioretto
  • 1