styling left and right child by css

Question

Below is a example of how I want my final result will be, however in real life, <div class="item"></div> is generated unknown number, so :nth-child(3) and :nth-child(5) this hard-coded style is not possible. active center classes will always be in center child. So, is there any css way can style the child between <div class="item active center"></div>

body{
  margin:0;
  background-color:#333;
}
.container{
  display:flex;
  align-items:center;
}

.item{
  height:50px;
  width:50px;
  background-color:#fff;
  margin:10px;
  opacity:0.2;
}

.item.active.center{
  opacity:1;
}

.item.active:nth-child(3){
   opacity:1;
}

.item.active:nth-child(5){
   opacity:1;
}

<div class="container">
  <div class="item"> </div>
  <div class="item active"> </div>
  <div class="item active"> </div>
  <div class="item active center"> </div>
  <div class="item active"> </div>
  <div class="item active"> </div>
  <div class="item"> </div>
</div>

Like this example http://jsfiddle.net/4a5uhm6x/ instead of middle 1 opacity:1 , need middle of 3 child opacity:1

@sodimel i tried the link as you said is duplicate `:not(:first-child):not(:last-child)` is not the result that i want, it will select all the child that not first and not last, all i need is only the two child between `active center` to be styled — FeelRightz, Aug 14 '19 at 08:35
@sodimel please remove duplicate , it is totally different things — FeelRightz, Aug 14 '19 at 08:37
there is no css that can do this for random numbers of elements - css does not interact with the dom in that way, you would need a js solution (or server side solution to add appropriate classes) — Pete, Aug 14 '19 at 08:40
@Im Happy: You want the same thing that the guy that asker the other question wanted, but there is currently no solution (for your problem or for his problem). That's why I flagged your question. — sodimel, Aug 14 '19 at 08:41
You cannot target the previous sibling by any means using CSS only. I would suggest to target the "3rd" instead and add "+" selector to target the 4th and 5th. https://codepen.io/yorsaquing/pen/vYBLPEZ — Yor, Aug 14 '19 at 08:46
@S.Visser @Pete @sodimel this is an "real life` example http://jsfiddle.net/4a5uhm6x/ , as you see this carousel only show the middle one is `opacity:1`, however i want it show middle of 3 is `opacity:1` — FeelRightz, Aug 14 '19 at 08:47
In the Owl Carousel you can add custom classes to items. Check https://stackoverflow.com/questions/28900207/how-do-i-add-classes-to-items-in-owl-carousel-2 — S.Visser, Aug 14 '19 at 09:09
@S.Visser yes, your link are able to fix my problem ! Thank you ! — FeelRightz, Aug 14 '19 at 09:17
@S.Visser can you add the answer below ? so i can mark as correct , thank you — FeelRightz, Aug 26 '19 at 02:24

score 0 · Answer 1 · answered Aug 14 '19 at 08:50

0

As I said in the comment section you cannot target the previous sibling of an element by just using CSS. I would suggest for you to target the "3rd" element and use the "+" selector to target the "4" and "5" something like this

body {
  margin:0;
  background-color:#333;
}

.container{
  display:flex;
  align-items:center;
}

.item{
  height:50px;
  width:50px;
  background-color:#fff;
  margin:10px;
  opacity:0.2;
}

.item.active.center{
  opacity:1;
}

.item.active.center + .item,
.item.active.center + .item + .item {
  opacity: 1;
}

<div class="container">
  <div class="item"> </div>
  <div class="item active"> </div>
  <div class="item active center"> </div>
  <div class="item active"> </div>
  <div class="item active"> </div>
  <div class="item active"> </div>
  <div class="item"> </div>
</div>

answered Aug 14 '19 at 08:50

Yor

182
6

this is not that i want, this will make the `center` child next two child style only , not between the `center` child – FeelRightz Aug 14 '19 at 08:52
I see then I think you need to use script for this one – Yor Aug 14 '19 at 08:54
You can check this its about checking the index and target the next and prev of the current item. I havent clean the code but hope you can get the idea. http://jsfiddle.net/y2fm64nb/ – Yor Aug 14 '19 at 09:10

Harsh Mishra · Answer 2 · 2019-08-14T08:44:07.860

item width can be set something like this

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

or use JS to calculate the number of Items and dynamically set the width

score -2 · Answer 3 · answered Aug 14 '19 at 08:32

-2

.item{
  height:50px;
  width:50px;
  background-color:#fff;
  margin:10px;
  opacity:0.2;
}

Try to set the width in % so, that it covers the whole width. If there are 7 Item have to use width : 14%

answered Aug 14 '19 at 08:32

Harsh Mishra

1,975
12
15

as i said it is *generated unknown number* – FeelRightz Aug 14 '19 at 08:33

styling left and right child by css

3 Answers3