How to Apply CSS Styles to Specific Elements with Varying Child Structures?

Styling Across Multiple Parents with :nth-child

Issue:

Ensuring that CSS selectors affect specific elements across multiple parents with varying child element structures can be challenging. Consider the following example:

<code class="html"><div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

The goal is to apply a specific style to the "one" and "three" list items. However, the use of :nth-child(1) and :nth-child(3) selectors results in styling the first and third list items within each ul element.

Solution:

Unfortunately, CSS selectors alone cannot handle such variations in parent-child structures. The :nth-child() selector and sibling combinators are limited to selecting elements within the same parent.

Alternate Approaches:

• JavaScript: Libraries such as jQuery can be used to target specific elements based on their index or position within the DOM.
• Explicit Marking: Adding classes or IDs to the desired elements (one and three in this case) allows for precise targeting using CSS selectors.

For example, adding the class "selected" to the first and third list items within the .foo element:

<code class="html"><div class="foo">
    <ul>
        <li class="selected">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="selected">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div></code>

CSS:

<code class="css">.foo li.selected {
    color: red;
}</code>

The above is the detailed content of How to Apply CSS Styles to Specific Elements with Varying Child Structures?. For more information, please follow other related articles on the PHP Chinese website!