CSS / jQuery - How to select the next element after main?

Asked

Viewed 75 times

0

Basically, I’m giving a margin-top on the first content after the header, according to the header size.

The problem is that each page of the site has different elements after the main (div or Section). How can I select the 'child element' of the main even though it is different on each page.

('main > div') and ('main > Section') work, but the margin is applied in both, the correct one would only be in the block below the header...

The site has many pages, I need only one script if possible, or if you have some css solution also accepted.

  • @No, this would select any element that is "1 level" below main. While the way @Genos responded main > *:first-child works correctly as it selects only the first.

1 answer

0


The selector first-child selects elements that are your father’s first child. And the selector * selects any element.

Soon, you could do something like:

main > *:first-child {
    /* Estilos */
}

This expression would select the first child of main, regardless of type.

Editing:

If you want only section or div are selected, instead of any element is also possible:

main > div:first-child, main > section:first-child {
    /* Estilos */
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.