How to select several children of an element in CSS

Issue

I have an element with id. I try to choose some of its children via CSS selectors.
#myDiv span, #myDiv i works but I wonder if there is a shorter way for this.

I’ve tried nested selectors like

#myDiv {
  & span, i {
    color: red
  }
}

but didn’t work.

#myDiv span, #myDiv i {
  color: red
}

<div id="myDiv">
  <span>My Span</span>
  <p>My P</p>
  <i>My I</i>
</div>

Solution

Your nested code is in SCSS not in CSS, and there is no nesting in CSS.

The shortest CSS code if you will not add any another elements under this container in future will be

#myDiv *:not(p) {
   color: red
}

Answered By – Abdulrahman Hatem

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0