Question 174932 in CSS Question posted in
Some basic documentation can be found here.

What is the meaning of life?

In my react js project

There is a block which may have one element or two elements, depending on run time.

For example:

Scenario 1: (two groups are existed )

<div class='menu-list'>
    <div class='group'>
        <div class="option">....</div>
    </div>
    
    <div class='group'>
        <div class="option">....</div>
    </div>
</div>

Scenario 2: (only 1 group)

<div class="menu-list">
    <div class='group'>
        <div class="option">....</div>
    </div>
</div>

Original I have my css styling ready. However, I noticed there exist scenario 2 sometimes in run time and I dont want to apply any styling in this situation.

I would like to style the element only when it is in scenario 1.

.menu-list .group:first-child .option:last-child { …..}

If it is possible to do so?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Based on the answers and adjustment,

    this logic gets to the target.

    .group:not(:only-child):first-child .option:last-child{

     color:green;
  
}

    Thank you all


  2. 0

    If you only have these two scenarios: when it’s one element you apply one specific style, when it’s multiple elements you apply another style, this should be for you.

    .group {
    color:green;
}
.group:first-child:last-child {
    color:red;
}
    <div class='menu-list'>
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
    
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
</div>

---

<div class="menu-list">
    <div class='group'>
        <div class="option">If it's alone it's red</div>
    </div>
</div>

    Or, if you only need to style for the first scenario (multiple elements)

    .group:not(:first-child:last-child) {
   color:green;
}
    <div class='menu-list'>
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
    
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
</div>

---

<div class="menu-list">
    <div class='group'>
        <div class="option">If it's the only element, I don't apply the style</div>
    </div>
</div>

    As rightly suggested by @AmauryHanser, using :only-child is more correct

    .group:not(:only-child) {
   color:green;
}
    <div class='menu-list'>
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
    
    <div class='group'>
        <div class="option">If the element is not alone, it's green</div>
    </div>
</div>

---

<div class="menu-list">
    <div class='group'>
        <div class="option">If it's the only element, I don't apply the style</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search