{"id":486,"date":"2020-07-02T19:50:16","date_gmt":"2020-07-02T22:50:16","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=486"},"modified":"2022-12-09T08:37:45","modified_gmt":"2022-12-09T11:37:45","slug":"seletores-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/seletores-css\/","title":{"rendered":"Seletores CSS"},"content":{"rendered":"

Seletores CSS<\/h1>\n

Os seletores de CSS s\u00e3o usados \u200b\u200bpara “encontrar” (ou selecionar) os elementos HTML que voc\u00ea deseja estilizar.<\/p>\n

Podemos dividir os seletores CSS em cinco categorias:<\/strong><\/p>\n

1.\u00a0 Seletores simples (selecione elementos com base no nome, ID, classe)
\n2. Seletores combinadores (selecione elementos com base em um relacionamento espec\u00edfico entre eles)
\n3. Seletores de pseudo-classe (selecione elementos com base em um determinado estado)
\n4. Seletores de pseudoelementos (selecione e estilize uma parte de um elemento)
\n5.\u00a0 Seletores de atributos (selecione elementos com base em um atributo ou valor de atributo)<\/p><\/blockquote>\n

Esta p\u00e1gina explicar\u00e1 os seletores CSS mais b\u00e1sicos.<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np {\r\n  text-align: center;\r\n  color: red;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Every paragraph will be affected by the style.<\/p>\r\n<p id=\"para1\">Me too!<\/p>\r\n<p>And me!<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
O seletor de id do CSS<\/h2>\n
O seletor de identifica\u00e7\u00e3o usa o atributo de identifica\u00e7\u00e3o de um elemento HTML para selecionar um elemento espec\u00edfico.<\/p>\n
A identifica\u00e7\u00e3o de um elemento \u00e9 \u00fanica dentro de uma p\u00e1gina; portanto, o seletor de identifica\u00e7\u00e3o \u00e9 usado para selecionar um elemento exclusivo!<\/p>\n
Para selecionar um elemento com um ID espec\u00edfico, escreva um caractere de hash (#), seguido pelo ID do elemento.<\/p>\n
Exemplo<\/strong>
\nA regra CSS abaixo ser\u00e1 aplicada ao elemento HTML com id = “para1”:<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n#para1 {\r\n  text-align: center;\r\n  color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p id=\"para1\">HOla mundo<\/p>\r\n<p>Este\u00a0par\u00e1grafo\u00a0n\u00e3o\u00a0\u00e9\u00a0afetado\u00a0pelo\u00a0estilo.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
O seletor de classe CSS<\/h2>\n
Seletor de classe seleciona elementos HTML com um atributo de classe espec\u00edfico.<\/p>\n
Para selecionar elementos com uma classe espec\u00edfica, escreva um caractere de ponto (.), Seguido pelo nome da classe.<\/p>\n
Exemplo<\/strong>
\nNeste exemplo, todos os elementos HTML com class = “center” ficar\u00e3o vermelhos e alinhados ao centro:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.center {\r\n  text-align: center;\r\n  color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1\u00a0class=\"center\">Cabe\u00e7alho\u00a0vermelho\u00a0e\u00a0alinhado\u00a0ao\u00a0centro<\/h1 class=\"center\">\r\n<p class=\"center\">Vermelho e no centro.<\/p> \r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Voc\u00ea tamb\u00e9m pode especificar que apenas elementos HTML espec\u00edficos sejam afetados por uma classe.<\/p>\n
Exemplo<\/strong>
\nNeste exemplo, apenas os elementos <p> com class = “center” ser\u00e3o alinhados ao centro:<\/p>\n
p.center {<\/code>
\ntext-align: center;<\/code>
\ncolor: red;<\/code>
\n}<\/code><\/p>\n
 <\/p>\n
Exemplo<\/strong>
\nNeste exemplo, o elemento <p> ser\u00e1 denominado de acordo com class = “center” e class = “large”:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.center {\r\n  text-align: center;\r\n  color: red;\r\n}\r\n\r\np.large {\r\n  font-size: 300%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1 class=\"center\">This heading will not be affected<\/h1>\r\n<p class=\"center\">This paragraph will be red and center-aligned.<\/p>\r\n<p class=\"center large\">This paragraph will be red, center-aligned, and in a large font-size.<\/p> \r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\"\"<\/p>\n
O CSS Universal Selector
\nO seletor universal (*) seleciona todos os elementos HTML na p\u00e1gina.<\/p>\n
Exemplo
\nA regra CSS abaixo afetar\u00e1 todos os elementos HTML da p\u00e1gina:<\/p>\n
* {<\/code>
\ntext-align: center;<\/code>
\ncolor: blue;<\/code>
\n}<\/code><\/p>\n
Exemplo:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n* {\r\n  text-align: center;\r\n  color: blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello world!<\/h1>\r\n\r\n<p>Every element on the page will be affected by the style.<\/p>\r\n<p id=\"para1\">Me too!<\/p>\r\n<p>And me!<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
O seletor de agrupamento CSS<\/strong><\/p>\n
O seletor de agrupamento seleciona todos os elementos HTML com as mesmas defini\u00e7\u00f5es de estilo.<\/p>\n
Observe o seguinte c\u00f3digo CSS (os elementos h1, h2 e p t\u00eam as mesmas defini\u00e7\u00f5es de estilo):<\/code><\/p>\n
h1\u00a0{<\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\ncolor:<\/span>\u00a0red;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
h2\u00a0{<\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\ncolor:<\/span>\u00a0red;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
p\u00a0{<\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\ncolor:<\/span>\u00a0red;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
Ser\u00e1 melhor agrupar os seletores para minimizar o c\u00f3digo.<\/p>\n
Para agrupar seletores, separe cada seletor com uma v\u00edrgula.<\/p>\n
h1, h2, p\u00a0{<\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\ncolor:<\/span>\u00a0red;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1, h2, p {\r\n  text-align: center;\r\n  color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hello World!<\/h1>\r\n<h2>Smaller heading!<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n