{"id":683,"date":"2020-07-03T20:17:55","date_gmt":"2020-07-03T23:17:55","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=683"},"modified":"2022-12-09T08:24:49","modified_gmt":"2022-12-09T11:24:49","slug":"combinadores-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/combinadores-css\/","title":{"rendered":"Combinadores CSS"},"content":{"rendered":"

Um seletor de CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.<\/p>\n

Existem quatro combinadores diferentes no CSS:<\/p>\n

seletor descendente (espa\u00e7o)
\nseletor filho (>)
\nseletor de irm\u00e3o adjacente (+)
\nseletor geral de irm\u00e3os (~)<\/p>\n

\n

Seletor Descendente<\/h2>\n

O seletor descendente corresponde a todos os elementos descendentes de um elemento especificado.<\/p>\n

O exemplo a seguir seleciona todos os elementos <p> dentro dos elementos <div>:<\/p>\n

\n

Exemplo<\/h3>\n

\"\"<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv p {\r\n  background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>\r\n  <p>Paragraph 1 in the div.<\/p>\r\n  <p>Paragraph 2 in the div.<\/p>\r\n  <section><p>Paragraph 3 in the div.<\/p><\/section>\r\n<\/div>\r\n\r\n<p>Paragraph 4. Not in a div.<\/p>\r\n<p>Paragraph 5. Not in a div.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n<\/div>\n
Seletor de crian\u00e7a<\/strong><\/p>\n
O seletor filho seleciona todos os elementos que s\u00e3o filhos de um elemento especificado.<\/p>\n
O exemplo a seguir seleciona todos os elementos <p><\/code> filhos de um elemento <div><\/code>:<\/p>\n
 <\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv > p {\r\n  background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>\r\n  <p>Paragraph 1 in the div.<\/p>\r\n  <p>Paragraph 2 in the div.<\/p>\r\n  <section><p>Paragraph 3 in the div.<\/p><\/section> <!-- not Child but Descendant -->\r\n  <p>Paragraph 4 in the div.<\/p>\r\n<\/div>\r\n\r\n<p>Paragraph 5. Not in a div.<\/p>\r\n<p>Paragraph 6. Not in a div.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Seletor de irm\u00e3o adjacente<\/span><\/h2>\n
O seletor de irm\u00e3o adjacente seleciona todos os elementos que s\u00e3o os irm\u00e3os adjacentes de um elemento especificado.<\/span><\/p>\n
Os elementos irm\u00e3os devem ter o mesmo elemento pai e “adjacente” significa “imediatamente a seguir”.<\/span><\/p>\n
O exemplo a seguir seleciona todos os elementos <p> que s\u00e3o colocados imediatamente ap\u00f3s os elementos <div>:<\/span><\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv + p {\r\n  background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>\r\n  <p>Paragraph 1 in the div.<\/p>\r\n  <p>Paragraph 2 in the div.<\/p>\r\n<\/div>\r\n\r\n<p>Paragraph 3. Not in a div.<\/p>\r\n<p>Paragraph 4. Not in a div.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Seletor Geral de Irm\u00e3os<\/span><\/h2>\n
O seletor geral de irm\u00e3os seleciona todos os elementos que s\u00e3o irm\u00e3os de um elemento especificado.<\/span><\/p>\n
O exemplo a seguir seleciona todos os elementos <p> que s\u00e3o irm\u00e3os dos elementos <div>:\u00a0<\/span><\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv ~ p {\r\n  background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Paragraph 1.<\/p>\r\n\r\n<div>\r\n  <p>Paragraph 2.<\/p>\r\n<\/div>\r\n\r\n<p>Paragraph 3.<\/p>\r\n<code>Some code.<\/code>\r\n<p>Paragraph 4.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


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