Set or add margin to left under each summary tag in html-CodePudding

Could someone help me to add a margin to left of "Second Summary" maybe 12px and to the "Third Summary" x2 or 24px?

I am thinking if it is possible to use CSS selectors.

<details>
    <summary>First Summary</summary>
    <details>
        <summary>Second Summary</summary>
        <details>
            <summary>Third Summary</summary>
        </details>
    </details>
</details>

CodePudding user response：

details details{
    margin-left: 12px;
}

CodePudding user response：

Try this:

details > details > summary
{
margin-left:12px
}

details > details > details > summary
{
margin-left:24px
}

<details>
    <summary>First Summary</summary>
    <details>
        <summary>Second Summary</summary>
        <details>
            <summary>Third Summary</summary>
        </details>
    </details>
</details>

CodePudding user response：

Use padding and it will work for any nesting level

details details {
  padding-left: 12px;
}

<details>
    <summary>First Summary</summary>
    <details>
        <summary>Second Summary</summary>
        <details>
            <summary>Third Summary</summary>
        </details>
    </details>
</details>

CodePudding user response：

You can use this:

details > details {
 margin-left: 12px;
}

Every "details" inside an other "details" will get a left margin of 12px