Only select first instance of nth-child with multiple results-CodePudding

I'm using a webpage builder that is limiting my control over certain aspects of design. Currently it pre-format all my div elements to live within a container among other things. The stylesheet has a max-width on all containers and I want to remove this for just the first container.

The page looks something like this (simplified)

...
<section>
  <div >
    <div >
      <div >
        <div  id="1">
        ...
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div >
    <div >
      <div >
        <div  id="2">
        ...
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div >
    <div >
      <div >
        <div  id="3">
        ...
        </div>
      </div>
    </div>
  </div>
</section>

The CSS I want to change is for .container but I only want to change it for #1. Right now I have:

<style>
div.container:nth-child(5) {max-width: none !important;}
</style>

But that selects all the containers on the page so #1, #2, #3, etc. all have no max-width.

Any help here would be greatly appreciated!

CodePudding user response：

Sounds like you want to change the width of the container in the first section.

<style>
    section:first-of-type>.container {max-width: none !important;}
</style>

CodePudding user response：

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

try solving with a custom class