Comece com CSS3: Seletores para Iniciantes

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

[{"selector":"#anim-3ba4b046-374d-44fb-abf3-5224d69d746a [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-8cd07596-847a-459f-9441-d319b9650bea","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f9844448-490e-4d5c-9b88-8a46d345386e","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-d708e524-19c0-416c-a315-d93e65d531b2 [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-ffda5e7b-fc07-4c3d-ae8f-b41abba5cfa1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c2e8d1a-c996-4af8-9750-fbf991520f76","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-d7f6fd9e-2e29-49b4-9c24-4afb87c52ca5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0be2cc46-6cf4-4d79-9f7a-e56821c29095","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-9d8f3433-124d-4965-9ace-4cce379faa4a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-284cab38-5936-4314-9e6f-202d7dc13369","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-bb4e120c-effa-4fc2-b5b7-ca46036ee68c [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-1fcd2867-0c71-4452-9750-1c556acd1a66","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e560870-e40f-42bf-afc9-a5824c0b6734","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-f78697a7-c197-4181-8428-b679467dc731","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cf897959-321c-48b1-829c-03cfe9152abb","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-a81180a0-637b-46e3-8953-8dc6ff423197 [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-7a86b667-933b-4827-82e1-99f995763a34","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14fad2e4-f85e-47da-acc9-e0f0b9d23f3b","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-e0a778cf-c76d-4bd6-af26-621b9a98f7af","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c23b1aa-e5f0-4532-92af-a960428582e1","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-80b8dee5-ec3f-4e8f-8901-8ab17dab4395","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9845c821-9af3-418d-8b5e-813d0e4a667c","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-09499c98-c3c6-4715-bc9c-1e540f6676fa [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-b90bad1d-55bb-4b4c-8b34-5e72ea4507f6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e33cac3d-be7c-4052-af0a-6b01a2495867","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-e26ceb75-bbf2-42ae-b1f3-02770f50a3b4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-904fbe3f-3b13-4330-bba1-15b52f4b66fc","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-c21e84bb-a98a-47cc-9918-2e2b3576f1bb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7a8e4c9-79d5-404f-aa45-ee64b688db43","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-e2b0e557-1d36-4bdf-9c4f-1ebe8e3f9ec1 [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-576dd545-5b00-4a55-b212-a46912dd7342","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e5c723aa-90f4-4942-8199-e45cda1c9dd1","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-3ccae826-a1f1-4eb8-8ed2-06ef2d842eaa","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca4d8386-7b70-402a-8085-c34473c1fd79","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-787bcb74-9883-4cd9-92fa-3e69116a756c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-87b20a62-83ef-49d9-ba81-254e5694a0f8","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-bc5d8e30-115f-4e09-b650-f3db79e33a83","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e91ae5c5-30bb-4cfb-a2d0-b968ed50d770","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-4e3c82c0-4e72-46e6-a943-28dd1aeaa51b [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"}]

Comece com CSS3: Seletores para Iniciantes

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!