43:["$","title",null,{"children":"Revisão: Seletores em CSS | carolx | Observable"}] 4b:T5d3,# 1. Seletores de tag / class / id As formas mais simples de selecionar os elementos. Na maior parte dos casos, seletores de class e tag serão suficientes para montar o seu layout ### Selecionando pelo nome da tag Qualquer um dos nomes de tag documentados para a linguagem HTML podem ser utilizados como seletores. Exemplos: - `p{ }` seleciona todos os parágrafos da página, independente da classe - `a{ }` seleciona todos os links da página - `*{ }` é um seletor universal, irá se aplicar a todos os elementos ### Selecionando pelo nome da classe Quando um elemento teve o atributo `class=""` definido, você pode usar a classe ou classes definidas para atribuir os estilos a ele. Exemplos: - `.item-1{ }` seleciona qualquer elemento que tenha a classe `"item-1"` - `div.item-1{ }` (sem espaço antes da classe) seleciona todos os elementos tipo div que tenham a classe `"item-1"` ### Selecionando pelo id Se o elemento tem um atributo `id=""` definido, pode-se usá-lo como seletor. O id é mais usado para selecionar o elemento no javascript. Evite usar o id no css em folhas de estilo longas, pois você pode ter conflitos de hierarquia. Exemplos: - `#box-1{ }` seleciona qualquer elemento que tenha o id `"box-1"` - `#box-1.no-margin{ }` seleciona qualquer elemento que tenha simultaneamente o id `"box-1"` e a classe `"no-margin"` **Nota:** No html, nomes de classe ou id não devem ter acentos ou espaços internos (o espaço é considerado uma separação entre classes) 4c:T44e,### Pratique: Repare nessas duas regras de CSS que foram criadas no exemplo: - `.layout-2b div { }` - `.layout-2b > div > div { }` A primeira regra está selecionando **todas** as divs que estejam dentro de "layout-2b", por isso todas as divs têm uma borda pink. A segunda regra está selecionando apenas as divs que sejam **netas** de "layout-2b". Ou seja, as divs dentro das divs que estão dentro de layout-2b Quanto mais específico você for ao criar regras, menor as chances de sobrescrever uma regra anterior sem querer. - No CSS, crie uma regra geral para a classe `.destaque` e atribua o *background-color: pink* para essa regra. Repare que tanto o quadrado e círculo que têm a classe destaque, assim como os títulos dos blocos, ganharam a cor pink. - E se quisermos mudar a cor da classe destaque somente no quadrado e no círculo, deixando os títulos como estão? Para isso, é preciso ser específico. Em vez de simplesmente `.destaque{}`, modifique a regra para `.layout-2b > div > div.destaque{ }` Agora, somente os quadrados e círculos com a classe destaque terão a cor pink.4d:T481,### EXERCÍCIO 3-C Podemos querer determinar um estilo diferente dependendo da posição do item no grupo. No exemplo a seguir, temos elementos que utilizam a mesma imagem como fundo, mas alteramos a posição do fundo para que a imagem seja recortada em posições diferentes para o primeiro, segundo e terceiro items. A imagem de fundo completa é assim: image host

Podemos criar uma máscara na imagem, usando-a como background de cada elemento – `background: url('caminho/da/imagem.jpg')`. Em seguida definimos, no estilo de cada item, a posição da imagem na área visível em cada um deles. Tudo isso sem ter que definir classes específicas em cada `div` do html. Para isso, usamos a pseudo-classe `:nth-child()` - que permite definir qual das 4 divs terá um determinado estilo, pela ordem delas no html. Veja alguns casos: ``` div:nth-child(1) // a primeira div de um grupo div:nth-child(2) // a segunda div de um grupo div:nth-child(2n) // todas divs em posição múltipla de 2 (2, 4, 6, 8) ``` Confira o código abaixo para ver como cada imagem foi posicionada.4e:[] 47:{"id":"34d95371138cbefd","slug":"revisao-seletores-css-parte-1","title":"Revisão: Seletores em CSS","thumbnail":"0f1c67d69b197ca07c1cb6bec69db3a406c40849bdc30e53f70ff2770c2f860f","access_level":"public","create_time":"$D2022-03-08T05:58:59.171Z","update_time":"$D2022-03-21T08:16:17.860Z","view_time":null,"first_public_time":"$D2022-03-09T22:11:29.904Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":799,"publish_version":799,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"},{"type":"individual","id":"d65a29b738c2e74f","login":"tiagombp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c9efc3ec79f2da0371c9ed09baf9e22624bf7477f9dfc315c05d581f8e0a4daa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":35,"collection":{"id":"bfe1f0fd95ab6ced","slug":"programacao-web-introducao","title":"Programação Web - Introdução","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"type":"notebook","body":{"titling":"auto","title":"Revisão: Seletores em CSS","cells":[{"id":0,"value":"# Revisão: Seletores em CSS\n\nSeletores são as regras de css que usamos para selecionar o elemento que receberá os estilos.\nVamos revisar como usar os tipos de seletores para criar uma regra em css. Focaremos nos casos mais comuns, a seguir:\n\n- seletores de ***tag*** / ***classe*** / ***id***\n- seletores ***hierárquicos***\n- **pseudo-seletores** \n\nTambém passaremos pela combinação de diferentes seletores e hierarquia\n\n**Dica:** quando precisar lembrar dos tipos de seletores, você pode buscar por uma cheat sheet como [esta página](https://frontend30.com/css-selectors-cheatsheet/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"### EXEMPLO 1-A\n\nNo exemplo a seguir, temos dois links dentro de um parágrafo. Observe no HTML que apenas um dos links tem uma classe definida, o outro não. \n\nAo definirmos o seletor `a{ }` no CSS, esse estilo é aplicado aos dois links, mas ao definirmos os seletor `a.special-link{ }` somente um deles recebe a borda preta.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"\n

\n Este é o texto de parágrafo com dois links: link 1, que não tem classe definida e link 2, que tem classe definida.\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"### EXEMPLO 1-B\n\nÀs vezes podemos querer aplicar um estilo a vários elementos da página ao mesmo tempo, mas aplicar estilos extras a determinados elementos. Podemos fazer isso nas regras de css definindo classes extras para tornar a regra mais específica.\n\nNo HTML a seguir, temos dois blocos cujos filhos são itens numerados. Repare que os dois são semelhantes, mas têm diferentes larguras. Para isso, no HTML definimos uma segunda classe `list-2` para o elemento que será diferente, separando as classes por um espaço.\n\n**Exemplo:** `

`\n\nNo CSS, basta então definir os estilos que devem ser iguais na classe em comum, e um estilo diferente para o elemento que tem a segunda classe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"\n

\n\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"### Pratique:\n\n- Modifique a cor da borda para laranja (`border: 1px solid orange;`) em volta da segunda lista\n- Crie uma regra de CSS que aplique cantos arredondados (`border-radius: 12px;`) ao item 3 da primeira lista e ao item 4 da segunda lista. Você também precisará atribuir uma nova classe ao HTML destes elementos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"# 2. Seletores hierárquicos\n\nNo exercício anterior, definimos a classe *\"item\"* para cada um dos itens numerados no HTML. Isto é repetitivo e não é muito prático. Podemos evitar isso criando regras que especifiquem a hierarquia dos elementos.\n\nPara isso, ao criar a regra de css, nos referimos a filhos diretos ou mesmo filhos dos filhos de um elemento. Isso ajuda a dar especificidade à regra e evitar conflitos, e também pode ajudar a escrever uma estrutura em HTML mais enxuta.\n\nVeja os exemplos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"

` que sejam descendentes de \"box-container\".\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"\n

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"### EXEMPLO 2-B\n\nVamos praticar a diferença entre selecionar somente descendentes diretos (filhos) ou selecionar todos os descendentes de um elemento (filhos, netos, bisnetos).\nNo exemplo a seguir temos um bloco com a classe \"layout-2b\", e dentro dele, dois blocos \"quadrados\" e \"circulos\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"\n

\n \n

\n Quadrados\n

\n \n

\n Círculos\n

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"# 3. Pseudo-classes\n\nPseudo-classes são palavras-chave que usamos numa regra de css em certas situações, como designar um estado do elemento ou uma posição. Por exemplo, o estado de um link ao passar o mouse sobre ele, é referenciado com a pseudo-classe `:hover`. Vamos ver como funcionam as pseudo-classes mais comuns, que serão mais úteis de lembrar:\n\n- Pseudo-classes de **estado** do elemento\n- Pseudo-classe de **exclusão** de elemento\n- Pseudo-classes de **posição** do elemento\n\nVejamos alguns exemplos.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"### EXEMPLO 3-A\n\nAlgumas pseudo-classes servem para mudar os estilos somente quando um evento específico acontece. O exemplo mais comum é **:hover**, que usamos para definir mudanças no estilo somente quando passarmos o mouse por cima do elemento.\n\nEm interfaces de touchscreen, **:hover** é ativada quando se toca no elemento\n\nPara usar, basta adicionar `:hover` ao final da regra de seleção do elemento\n\nNo exemplo a seguir, definimos a pseudo-classe **:hover** para todos os círculos (ou seja, a regra `\".layout-3a > div:hover\"`). Por isso, ao passar o mouse, eles mudam de cor.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"### Pratique:\n\nNo html, um dos elementos exibidos como círculos tem uma borda pink, pois diferenciamos esse elemento com a `class=\"especial\"`. Queremos que somente esse elemento, ao passar o mouse, tenha **cor de fundo rosa**.\n\nPara fazer isso, siga estes passos:\n\n1. Defina, somente para este elemento, uma regra para o estado :hover. Fica assim:\n ```\n .layout-3a > .especial:hover { }\n ```\n2. Dentro dessa regra, defina a cor de fundo especial, que se aplicará somente a este elemento:\n ```\n background-color: pink;\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"### EXERCÍCIO 3-B\n\nPodemos ainda definir que determinada regra de estilo **não** deve se aplicar a um elemento específico de um grupo. Nesse caso, usamos a pseudo-classe `:not()`\n\nVeja o exemplo a seguir. No HTML, definimos a class=\"inativo\" para um elemento, e queremos que todos os botões devem ter fundo azul, exceto aquele que tem `class=\"inativo\"`. Para isso, basta definir a pseudo-classe :not('.inativo') na regra que não deve ser aplicada a esse elemento.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"\n

\n \n \n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"### Pratique:\n\n1. Crie uma regra de css para aplicar a propriedade `\"border: 2px solid pink\"` ao passar o mouse nos botões. Lembre-se do exercício 3-A. Para aplicar um estilo no mouse-over, basta colocar `:hover` logo após a regra, sem espaço:\n ```\n .layout-3b > button:hover\n ```\n Teste a regra após aplicar.\n\n2. Agora altere essa regra, definindo que o hover **não** deve acontecer nos elementos que tenham a classe 'inativo' Basta incluir `:not(.inativo)` após o hover. Teste a regra após aplicar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"### Pratique:\n\n1. Escolha um animal na imagem completa acima, por exemplo a tartaruga. Tente alterar as porcentagens na propriedade `background-position`, com números de 0% a 100%, de modo a posicionar a tartaruga no centro do primeiro item.\n2. Podemos repetir o estilo para elementos múltiplos de 2, 3, 4, etc. Por exemplo, altere o número 4 nessa regra\n ```\n .layout-3c > div:nth-child(4)\n ```\n para 2n (que significa \"itens múltiplos de 2\"). Ao aplicar, o gatinho aparecerá nos itens 2 e 4. Se houvesse 8 itens, o gatinho apareceria nos itens 2, 4, 6 e 8, sem que fosse preciso criar uma regra de css para cada um dos itens individualmente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null