Concatenate pseudo selectors in css

CRSTN 0
Viewed 42

I have a one question that i dont know resolve.

If I have, two different lists ul and ol and i want applicate style at the first element of the first list without use ol tag or js, only i want use css:

<div>
<h1>Title</h1><ul>
  <li>element_1</li>
  <li>element_2</li>
  <li>element_3</li>
  <li>element_4</li>
  <li>element_5</li>
</ul>
<ol>
  <li>element_1</li>
  <li>element_2</li>
  <li>element_3</li>
  <li>element_4</li>
  <li>element_5</li>
</ol>
</div>

I test with:

div :has(li):nth-child(1) li {
  /* styles */
}

But i cant access to element of this way. Is possible resolve only with css?

Thanks, i cant find nothing to fix it

css html
2 Answers

The only possible way without using a strict ol or ul in the CSS is by using the element+element selector + and with * as a replacement.

h1 + * > li:first-child {
  background: yellow;
}
<div>
  <h1>Title</h1>
  <ul>
    <li>element_1</li>
    <li>element_2</li>
    <li>element_3</li>
    <li>element_4</li>
    <li>element_5</li>
  </ul>
  <ol>
    <li>element_1</li>
    <li>element_2</li>
    <li>element_3</li>
    <li>element_4</li>
    <li>element_5</li>
  </ol>
</div>

Kameron0

As i write in my comment under question, you can use h1 + * li:first-child. It's very dependent on HTML markup.

Using :has selector you can use something like that...

div :has(li) li:first-child {color: red;}
div :has(li) ~ :has(li) li:first-child {color: inherit;} /* return color from red for 2nd and next lists */
<div>
<h1>Title</h1><ul>
  <li>element_1</li>
  <li>element_2</li>
  <li>element_3</li>
  <li>element_4</li>
  <li>element_5</li>
</ul>
<ol>
  <li>element_1</li>
  <li>element_2</li>
  <li>element_3</li>
  <li>element_4</li>
  <li>element_5</li>
</ol>
</div>

userd8H60
Related