CSS contexts

👉É possível usar a mesma classe e depois custom with: tag.class contudo deve ser mais prático usar duas classes

I am `p` class demo

I am `div` class demo

p lead

h1 lead

👉Global parent is body

img { width: 30%; border: 1px solid red; }

CSS Selector combinators

Vamos contextualizar usando uma imagem em 3 diferentes cenários, a ordem de chamada pode alterar os resultados, deixar o mais específico por último.

👉Descendant Selector(space)

div img { width: 5%; border: 2px solid rgb(209, 6, 125); }

selector matches all elements that are descendants of a specified element.

👉Child-Selector (>)

The child selector selects all elements that are the children of a specified element.

div > img { width: 10%; border: 2px solid rgb(6, 71, 192); }

Exemplos...

`main > section` works? 👉yes, It's parent is main

<main> <p>one</p> <section> <p>two</p> </section> </main>

`main > section` works? 👉no, `section` is a child of one div inside main, must use descendant selector

<main> <p>one</p> <div> <section> <p>two</p> </section> </div> </main>

Tudo é questão de especificar os elementos corretamente, quando entender os parents/child/siblings tudo vai ficando mais fácil, o img não está dentro de nenhuma tag, isso significa que seu parent é o body, e por exemplo para esconder a primeira imagem:

Com o child-selector - seletor de filhos `>` estamos afetando todas as imagens que tem o body como parent

body > img { display: none; }

child and decendent:

<section> <span>span</span> <!-- this position span is child and decendent --> </section>

então ambos seletores works

section span { background: violet; } sectiozn > span { color: red; }

👉Adjacent Sibling (+)

used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

p + h1 { color: coral; }

`p` classes globais ou tag + class

h1 styles ok

✅Read about Adjacend Sibling and General Sibling Seletor `[type="checkbox"]:checked + label]`

👉General Sibling Selector (~)

selects all elements that are next siblings of a specified element.

p ~ ul { color: mediumvioletred; }

Just a paragraph...

p ~ code { color: seagreen; font-size: 2rem; display: block; }

Hello article > h2

span Global span style

Outro paragraph... Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, officia.

todos os codes after `p` will be selected | sudo apt get install todos os codes after `p` will be selected | sudo apt get install