1

I want to use first-child on the result of concatenating multiple css selectors.

Example: how to select first-child of the result of the css selectors body .foo, body .bar? In words: select all elements that has class foo that exists in the body element AND select all elements that has class bar that exists in the body element. Now take the first element in the collection of returned elements.

marcus.aberg
  • 23
  • 5
  • 1
    `body > p:first-child`? – Huelfe May 16 '17 at 10:51
  • My question was how to use `first-child` on `body .foo, body .bar`. Your answer says "first p-element in the body-element. My question is how to select "first element that has the class foo or bar in the body element". – marcus.aberg May 16 '17 at 11:23
  • 1
    "I want to use first-child on the result of concatenating multiple css selectors." No, you don't. Since the elements aren't related in any way other than simply appearing anywhere within the body element, you don't want to use :first-child. It is not possible to write a selector for this. – BoltClock May 16 '17 at 14:29

2 Answers2

0

body > p:nth-of-type(1) {
  font-size:20px;
}
<body>
   <p class="foo">Hello</p>
   <p class="bar">Hello</p>
   <p class="foo">Hello</p>
   <p class="bar">Hello</p>
</body>
LKG
  • 4,152
  • 1
  • 11
  • 21
0

You can try this:

DEMO HERE

For the first .foo

body p:nth-child(1){...}

For the first .bar

body p:nth-child(2){...}

First of all <p>

body > p:first-child{...}

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36