All geek questions in one place

Target first, even / odd and last element with a class, without a shell, among other elements (nth-of-class behavior) :)

I have the following structure:

<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. Element</div>
  <div>3. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
  <div class="alternate">5. Element with spec. Class</div>
  <div>9. Element</div>
  <div>10. Element</div>
  <div>11. Element</div>
</div>

There may be an unknown number of several elements before and after, and I have no way to add a “wrap” div around the elements with class = "alternate". (where everything will be fine).

I would like the first .alternate Element to be the top edge, the last .alternate Element to be the bottom. And all .alternate elements should have a different background color for each line (even / odd).

I tried it differently and I know that nth-of-type and nth-child will not work because there is no div wrapper around my .alternate elements and therefore it cannot work because all elements are counted for even / odd etc.

, :

http://codepen.io/emjay/pen/RpyyOo

, - . css?

!

+6
3

( border-top .alternate border-bottom .alternate), , border-top :

  • .alternate, , :not() .alternate, 21 > li >
  • , .alternate, , .

.alternate border-top .alternate, :first-child, , .alternate, border-bottom .alternate, :last-child.

" " .alternate, , , background, :nth-of-type() ( :nth-child()) -. , , .alternate background, , JavaScript - CSS, (. ).

(function(){
  var wrappers=document.querySelectorAll(".elementWrapper"),
      x=wrappers.length,
      divs,y,alt;
  while(x--){
    divs=wrappers[x].querySelectorAll(".alternate");
    y=divs.length;
    alt=!(y%2);
    while(y--)
      divs[y].classList.add((alt=!alt)?"odd":"even");
  }
})();
/** JQuery **/
//$('.alternate:odd').addClass('odd')
//$('.alternate:even').addClass('even');
.elementWrapper>div:not(.alternate)+div.alternate,
.elementWrapper>div.alternate+div:not(.alternate),
.elementWrapper>div.alternate:first-child{
  border-top:1px solid #000;
}
.elementWrapper>div.alternate:last-child{
  border-bottom:1px solid #000;
}
.elementWrapper>div.alternate.odd{
  background:#ccc;
}
.elementWrapper>div.alternate.even{
  background:#eee;
}

/** Uncomment below for CSS-only zebra-striping **/
/*.elementWrapper>div.alternate:nth-of-type(odd){
  background:#ccc;
}
.elementWrapper>div.alternate:nth-of-type(even){
  background:#eee;
}*/

/** "housekeeping" **/.elementWrapper{background:#fff;color:#000;margin:0 0 20px;}.elementWrapper>div{font-family:sans-serif;font-size:14px;overflow:hidden;padding:5px;text-overflow:ellipsis;white-space:nowrap;}
<div class="elementWrapper">
  <div>1. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
  <div class="alternate">5. Element with spec. Class</div>
  <div>9. Element</div>
</div>
<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
</div>
Hide result
+5

@Shaggy, :not nth-of-type, , css.

:

.elementWrapper div:not(.alternate)+div.alternate,
.elementWrapper div.alternate+div:not(.alternate) {
  border-top: 2px solid blue;
}

.elementWrapper div.alternate:nth-of-type(odd) {
  background: green;
}

.elementWrapper div.alternate:nth-of-type(even) {
  background: red;
}
<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. Element</div>
  <div>3. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
  <div class="alternate">5. Element with spec. Class</div>
  <div>9. Element</div>
  <div>10. Element</div>
  <div>11. Element</div>
</div>
Hide result

OP, div .alternate, . first-child last-child.

/* if there are no elements before .alternate */
.elementWrapper > div.alternate:first-child{
  border-top: 2px solid blue;
}

/* if there are no elements after .alternate */
.elementWrapper > div.alternate:last-child{
  border-bottom: 2px solid blue;
}
+2

If your .alternate elements are concentrated in one region (that is, they are all together), you can get a zebra style with these styles:

.alternate {
  background: gray;
}

div:nth-of-type(odd):not(.alternate)+div.alternate~div.alternate:nth-of-type(even),
div:nth-of-type(odd):not(.alternate)+.alternate:nth-of-type(even),
div:nth-of-type(even):not(.alternate)+div.alternate~div.alternate:nth-of-type(odd),
div:nth-of-type(even):not(.alternate)+.alternate:nth-of-type(odd) {
  background: red;
}
<div class="wrap">
  <div class="col">
    <div class="elementWrapper">
      <div>1. Element</div>
      <div>2. Element</div>
      <div>3. Element</div>
      <div class="alternate">1. Element with spec. Class</div>
      <div class="alternate">2. Element with spec. Class</div>
      <div class="alternate">3. Element with spec. Class</div>
      <div class="alternate">4. Element with spec. Class</div>
      <div class="alternate">5. Element with spec. Class</div>
      <div>9. Element</div>
      <div>10. Element</div>
      <div>11. Element</div>
    </div>
  </div>
  <div class="col">
    <div class="elementWrapper">
      <div>1. Element</div>
      <div>2. Element</div>
      <div>3. Element</div>
      <div>4. Element</div>
      <div class="alternate">1. Element with spec. Class</div>
      <div class="alternate">2. Element with spec. Class</div>
      <div class="alternate">3. Element with spec. Class</div>
      <div class="alternate">4. Element with spec. Class</div>
      <div class="alternate">5. Element with spec. Class</div>
      <div>10. Element</div>
      <div>11. Element</div>
      <div>12. Element</div>
    </div>
  </div>
</div>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1015960/

More articles:


All Articles