Home >Web Front-end >CSS Tutorial >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:30307browse
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
- .
- 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>
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
<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!