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

Question

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

Navigation

#1 by (0 votes)

0

Basically, I'm giving a margin-top in the first content after the header, according to the size of the header.

The problem is that every page in the site has different elements after the main (div or section). How can I select the 'child' element of main even being 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 a script if possible, or if you have some css solution I also accept.

jquery css

asked by anonymous 25.11.2016 / 03:57

1 answer

How to redeclar a function after loading new content with Ajax? How to manipulate a checkbox in a Bootstrap modal from the DB

score 0 · Accepted Answer

The first-child selector selects elements that are the first child of its parent. 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.

Edition:

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

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