-1

I have a div tag containing ul in which there are 3 li tags in which there are p and h2.

I can't set CSS properties on all but the first li: For some reason, in the first li, p is also shifted. .features li:not(:first-child) h2, p { margin-left: 94px; }

enter image description here

SmiMax
  • 3
  • 3
  • 2
    Please provide a [mre]. – D. Pardal Feb 12 '21 at 17:18
  • Welcome to Stackoverflow: remember to take the [tour], read the [posting topics](/help/on-topic) for SO, and make sure to read the [posting guidelines](/help/how-to-ask). In this case, instead of describing code using text, show the HTML (and don't "write it anew by hand", of course, copy-and-paste what you _actually_ see in your page source that if you have any typos there, you'll have typos in your posted code, too). The general posting approach is to explain what you need, show the code you wrote, explain how it deviates from expectation, and talk through the debugging you already did. – Mike 'Pomax' Kamermans Feb 12 '21 at 17:25

1 Answers1

3

The comma in your selector splits it like this:

✅ .features li:not(:first-child) h2 or p.

You seem to expect it to split it like this:

❌ .features li:not(:first-child) h2 or .features li:not(:first-child) p.

CSS doesn't have syntax which allows that kind of shorthand. you have to be explicit:

.features li:not(:first-child) h2,
.features li:not(:first-child) p { ... }

There are preprocessors which provide more convenient syntax. For example, if you were writing SASS using the SCSS syntax:

.features li:not(:first-child) {
    h2, p { ... }
}
Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264