CSS присваивает класс дочерним элементам, которые не являются конкретным типом

Question

Предположим, у меня есть элемент DIV, идентификатор которого равен mydiv.

<div id="mydiv"> 
    <div></div> 
    <span></span> 
    <p></p> 
</div> 

Я хочу присвоить класс CSS только тем прямым потомкам этого div, которые не являются элементами span. Поэтому в приведенном выше примере класс должен быть назначен только для дочерних элементов div и p. Как это сделать, используя CSS (не Javascript)?

Answer 1

Вы можете использовать :not:

#mydiv > *:not(span){ 
    color: #f00; 
} 

JSFiddle

Примечание: Вы не назначаем класс CSS, вы подаете группу стилей CSS для конкретного выбора.

Answer 2

Вы не можете «добавить класс» с помощью CSS, но вы можете выбрать элементы и применить к ним стиль, если это то, что вы имеете в виду.

#mydiv > :not(span) { /* apply style to direct descendants that aren't span */ } 

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot