2

There are two classes .float-left & .float-right given to each two div. Now I am trying to apply first-child and last-child CSS selector properties to these two classes. Child selector for float-left class works fine, but not with the float-right class.

.float-left:first-child {background: yellow;}
.float-left:last-child {background: green;}


.float-right:first-child{background: blue;}
.float-right:last-child{background: red;}
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
</br>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>

You can see in above snippet result that the first div of class float-right having content Right1 has red background, while CSS property for first child of float-right class is background:blue;. Same issue is seen for the last-child.

I understand from the discussion in comments and the answer for CSS selector for first element with class that this is how the first-child and last-child selectors work but I need a way to select the last element across multiple parents. JavaScript/jQuery solutions are also welcome.

The scenario described above is a just a minimal example but my actual scenario is as follows:

Suppose I have 50 div's with class float-right and all of them are individuals in different parent elements, also they are not in the even-odd pattern. Then what would be my approach to select the last (50th) div with class float-right?

JSFiddle

Community
  • 1
  • 1
divy3993
  • 5,732
  • 2
  • 28
  • 41
  • Your interpretation of the way `first-child`, `last-child` works is incorrect. The classes you append to the selector are only *additional* conditions that need to be satisfied. In the first block, the `float-right` is the last child under its parent. Similarly in second block, the `float-right` is the first child under its parent. – Harry Sep 11 '15 at 05:46
  • @dwreck08 that has nothing to do with question. – divy3993 Sep 11 '15 at 05:46
  • @Harry Ok got it. So what if i want to make it work as my interpretation. Should i use nth-of-type() selector? – divy3993 Sep 11 '15 at 05:48
  • That depends on your broader needs. The code that is provided in question is too small to give a complete answer. For this case, yes, `nth-of-type` (or even `nth-child`) selectors would work. You could have a look at [this](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) and [this](http://stackoverflow.com/questions/18995362/last-child-not-working-as-expected/18995451#18995451) for some detailed explanations. – Harry Sep 11 '15 at 05:49
  • Suppose i have 50 div's with class float-right and all of them are individuals in different parent elements, also they are not in the even-odd pattern. Then what would be my approach to select the last(50th) div with class float-right? – divy3993 Sep 11 '15 at 05:53
  • 2
    Then you wouldn't be able to use CSS selectors at all. All the `*-child` and `*-type` selectors work only when the elements share the same parent. You'd need to look at JS or jQuery (or any preferred libraries). – Harry Sep 11 '15 at 05:56
  • 1
    Okay, Thanks a lot. I don't know what you would post as answer my question is much broader, but i want to give you credits. Thanks. – divy3993 Sep 11 '15 at 05:58
  • @Harry Please Help me to edit my question. I don't know what way to ask it. – divy3993 Sep 11 '15 at 06:00
  • @Harry am OK with JS/JQuery. – divy3993 Sep 11 '15 at 06:03

2 Answers2

1

As discussed in comments CSS selectors cannot be used to select elements based on pattern when the elements belong to different parents. You would need to use JavaScript or jQuery or any preferred library to achieve this.

Both the methods that are provided below are already described at a high level in the thread that I had linked in comments but I am posting a detailed answer to help you along the way.

With pure JavaScript:

You can use document.querySelectorAll to fetch all elements which have the required class (into an array). Then you can access the first and last elements in the array using its index ([0] for the first element and [array.length - 1] for the last element) and assign the required class/properties.

window.onload = function() {
  
  var floatRightEls = document.querySelectorAll(".float-right"); // select all elements with float-right class

  var floatLeftEls = document.querySelectorAll(".float-left"); // select all elements with float-left class

  floatRightEls[0].classList.add("first"); // add extra class first to the first element with float-right class

  floatLeftEls[0].classList.add("first"); // add extra class first to the first element with float-left class

  floatRightEls[floatRightEls.length - 1].classList.add("last"); // add extra class last to the last element with float-right class

  floatLeftEls[floatLeftEls.length - 1].classList.add("last"); // add extra class last to the last element with float-left class
  
};
.float-left.first {
  background: yellow;
}
.float-left.last {
  background: green;
}
.float-right.first {
  background: blue;
}
.float-right.last {
  background: red;
}

/* Just for demo */

body{
  font-family: Calibri;
  font-size: 14px;
}
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>

With jQuery:

It becomes even more easier to implement with jQuery selectors. Just use the normal jQuery selector to select the element based on its class name and then attach the :first or :last pseudo in-order to select the first or the last element with the required class.

$(document).ready(function() {
  $(".float-left:first").addClass("first");
  $(".float-right:first").addClass("first");
  $(".float-left:last").addClass("last");
  $(".float-right:last").addClass("last");
});
.float-left.first {
  background: yellow;
}
.float-left.last {
  background: green;
}
.float-right.first {
  background: blue;
}
.float-right.last {
  background: red;
}
/* Just for demo */

body {
  font-family: Calibri;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>
Harry
  • 87,580
  • 25
  • 202
  • 214
0

I usually add a width to the main container that holds the child elements when it comes to floating them. I have edit your, hope it helps :)





    .main-div{ width: 300px;}
    .float-left{ float: left; }
    .float-left:first-child {background: yellow;}
    .float-left:last-child {background: green;}

    .float-right{ float: right; }
    .float-right:first-child{background: blue;}
    .float-right:last-child{background: red;}


    <div class="main-div">
      <div class="float-left">Left1</div>
      <div class="float-right">Right1</div>
    </div>
    </br>
    <div class="main-div">
      <div class="float-right">Right2</div>
      <div class="float-left">Left2</div>
    </div>