Como funcionam os Seletores no CSS

Quando se trata de estilizar elementos HTML em um site ou aplicativo, o CSS3 é uma ferramenta poderosa e essencial para os desenvolvedores.

[{"selector":"#anim-ac8637c6-8f97-4b1c-a787-c7e7bd408f59 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(10.98061442160767%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-903cc20a-f54f-497c-b752-9378517931db","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2fb69972-9a83-4109-8280-c4f3f2466069","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que são seletores do CSS3?

[{"selector":"#anim-dd4d6538-aecb-467a-b964-53fef790114f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-10.817307701326055%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b0342cda-95a5-4260-a1ce-f1ff9c717b53","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-94e70136-d09b-40b9-8cbd-f06cd81bc086","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-815be85d-4923-4829-bec9-8fc4a38004a6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f6f49ef-e85e-4267-ab72-26e85b177251","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f5081e34-dab0-4c96-8e44-cb0bf293d8bb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-edf8a20c-81a2-43f6-accb-3fac7a274870","keyframes":{"transform":["translate3d(115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Seletores básicos do CSS3

[{"selector":"#anim-2f1343a1-30ce-411b-b26c-253f77adeb4d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-e0fa7348-8136-4d73-99b4-734ff51385e6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab1bb5ee-0a25-4478-98a7-adecd4c9fd3d","keyframes":{"transform":["translate3d(0px, -396.34518%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-261ca109-4560-4cfc-9e6d-87983f2c9e8a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c1087c1-6baf-49b7-bd5a-4ce482a66f8d","keyframes":{"transform":["translate3d(0px, 217.39382%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Os seletores mais básicos do CSS3 incluem o seletor universal (*), que seleciona todos os elementos HTML em uma página, e o seletor de tipo, que seleciona todos os elementos HTML de um determinado tipo (por exemplo, todos os parágrafos).

Seletores avançados do CSS3

[{"selector":"#anim-68c4faf7-f075-4f04-a1c6-0135f0c3a66a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-15.74519228709598%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-8c22940d-05e3-45de-a52d-1f1c639e702d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8edd8685-f735-42a0-baea-b6402a871b9e","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4243792a-099e-44c1-a2d2-62e156bbaa11","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-963f090b-2965-45f7-99db-2a7e657e5e28","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-12748b2c-3f23-47b4-8640-f507e5a37ea5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-15c68aa9-1bc5-4f4d-9b89-8e0f5116538b","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Seletores em Conjunto

[{"selector":"#anim-3e292cf2-b7c4-41ca-af80-daa67823186a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-05cb70d3-f11e-4eb5-8289-b928d72343fb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32cfbc14-2c4b-4f88-bdbe-2e6407595c0e","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-31b83ad9-ec48-4c3f-9884-1dd0abe52658","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-22ec010a-70ca-4713-8055-273fffcd86f7","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-15856ced-2fc0-4b0d-9f36-117250d4e1a3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6954407d-5170-4caf-98a4-dfe6c16431c4","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Pratique o seu CSS!

[{"selector":"#anim-41b936b7-8b6e-4af1-8043-1615d1fad9a2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-12.156593428378613%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-29adf79d-5ba0-4e0a-b28b-7014f19428f0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b24580c-bc7e-452e-a3f5-01e70d01dcb2","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ea00c968-ace3-428e-8284-02d062c3a47f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d42eb10c-ed83-49fd-b540-06503f2065ca","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Como qualquer linguagem, para se tornar "bom" em CSS é necessário muita prática! Invente projetos e trabalhe neles.

Saiba mais sobre os Seletores em CSS3

[{"selector":"#anim-50858976-547b-46f2-8f2c-8fd21908ab6f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e57cfd00-0541-4d4f-9fb8-866cfc2803b7","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d5cc9e8e-27ef-46bc-9c81-f96c722fbe47","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-78925547-564d-48d2-b331-c646bb52f5b2","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6cf8c78f-9ec8-4a47-bb6b-45e190b48521 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0.4807692296303685%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

Como funcionam os Seletores no CSS

Quando se trata de estilizar elementos HTML em um site ou aplicativo, o CSS3 é uma ferramenta poderosa e essencial para os desenvolvedores.

O que são seletores do CSS3?

Os seletores do CSS3 são elementos usados para selecionar e estilizar elementos HTML em um site ou aplicativo.

Seletores básicos do CSS3

Seletores avançados do CSS3

Esses seletores incluem o seletor de descendência, que seleciona um elemento HTML dentro de outro elemento HTML5, e o seletor de filho, que seleciona um elemento HTML que é um filho direto de outro elemento HTML.

Seletores em Conjunto

Um dos principais benefícios dos seletores do CSS3 é a capacidade de combiná-los para criar seletores mais avançados e específicos.

Além disso, você pode usar seletores avançados em conjunto para selecionar elementos HTML com base em suas relações hierárquica

Pratique o seu CSS!

Saiba mais sobre os Seletores em CSS3

Confira nosso artigo completo sobre o assunto logo abaixo!