Home > Article > Web Front-end > How to Style Specific Nested Elements across Different Parent Structures?

How to Style Specific Nested Elements across Different Parent Structures?

Barbara StreisandOriginal: 2024-10-23 23:05:30173browse

Styling Nested nth-child Elements across Multiple Parents

Seeking a solution to style specific nested elements within varying parent structures, consider the following markup:

<br><div class="foo"></p>
<pre class="brush:php;toolbar:false"><ul>
    <li>one</li>
    <li>two</li>
</ul>
<ul>
    <li>three</li>
</ul>
<ul>
    <li>four</li>
</ul>

The goal is to apply styles to "one" and "three," regardless of whether they are the first children of each

Limitation of :nth-child()

Attempts to use :nth-child() fall short because it only applies to elements that share the same parent. In this scenario, the CSS selector .foo li:nth-child(1), .foo li:nth-child(3) would only target the first children of each

Alternative Solutions

JavaScript:

Using a library like jQuery allows you to select elements using JavaScript's powerful filtering capabilities. For instance, the following script would target the first and third

elements within the .foo container:
```
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>
```
Explicit Element Marking:

You can explicitly mark the desired elements with classes or IDs to enable their selection via CSS. For example, adding classes to the first and third

elements:

<br><ul></p>
<pre class="brush:php;toolbar:false"><li class="first">one</li>
<li class="second">two</li>

<li class="third">three</li>

<li class="fourth">four</li>

Then, you can use CSS to target the marked elements:

<code class="css">.foo .first,
.foo .third {
    color: red;
}</code>

The above is the detailed content of How to Style Specific Nested Elements across Different Parent Structures?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css for select using class this ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Fix Div Overlap Issues with z-index?Next article：How to Fix Div Overlap Issues with z-index?

See more

How to Style Specific Nested Elements across Different Parent Structures?

Related articles