How to Style Specific Nested Elements across Different Parent Structures?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to Style Specific Nested Elements across Different Parent Structures?

Barbara Streisand

Oct 23, 2024 pm 11:05 PM

How to Style Specific Nested Elements across Different Parent Structures?

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">
<pre class="brush:php;toolbar:false">

three

four

<br>

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>
```
one
two

three

<br>

four

<br>

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!

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

How We Tagged Google Fonts and Created goofonts.comApr 12, 2025 pm 12:02 PM

GooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google

Timeless Web Dev ArticlesApr 12, 2025 am 11:44 AM

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their

The Deal with the Section ElementApr 12, 2025 am 11:39 AM

Two articles published the exact same day:

Practice GraphQL Queries With the State of JavaScript APIApr 12, 2025 am 11:33 AM

Learning how to build GraphQL APIs can be quite challenging. But you can learn how to use GraphQL APIs in 10 minutes! And it so happens I've got the perfect

Component-Level CMSsApr 12, 2025 am 11:09 AM

When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the

Set Type on a Circle... with offset-pathApr 12, 2025 am 11:00 AM

Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I