{"id":17226,"date":"2019-03-21T09:55:59","date_gmt":"2019-03-21T12:55:59","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=17226"},"modified":"2019-03-21T09:55:59","modified_gmt":"2019-03-21T12:55:59","slug":"seletores-css-o-que-sao-e-como-aplica-los","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/seletores-css-o-que-sao-e-como-aplica-los\/","title":{"rendered":"Seletores CSS &#8211; O que s\u00e3o e como aplic\u00e1-los"},"content":{"rendered":"<p>Se voc\u00ea pretende aprender tudo sobre <strong>Seletores CSS<\/strong> hoje, voc\u00ea veio ao lugar certo! Para que possamos aplicar qualquer tipo de estiliza\u00e7\u00e3o \u00e9 necess\u00e1rio definir quais os elementos que ser\u00e3o afetados. A forma que isso ocorre \u00e9 com a utiliza\u00e7\u00e3o de seletores.<\/p>\n<p>\u00c9 comum a utiliza\u00e7\u00e3o de alguns <strong>seletores css<\/strong>, como nome de tag, utiliza\u00e7\u00e3o de classes e ids, sele\u00e7\u00e3o de todos os elementos que est\u00e3o aninhados a outras tags. Mas o <a href=\"https:\/\/www.mxcursos.com\/blog\/tags\/css\/\">CSS<\/a> possui muitos mais seletores.<\/p>\n<p>Vamos conhecer alguns deles.<\/p>\n<h3>Seletores CSS &#8211; Atributos<\/h3>\n<p>Todos elementos HTML pode possui meta informa\u00e7\u00f5es, que s\u00e3o os atributos. Voc\u00ea pode trabalhar com CSS, para realizar sele\u00e7\u00f5es baseados nesses atributos, desde sua exist\u00eancia ou valores.<\/p>\n<p><strong>E[ATTR]<\/strong><\/p>\n<p>Podemos selecionar o elemento que possui um determinado atributo.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletor: E[ATRIBUTO]\" src=\"\/\/codepen.io\/davidchc\/embed\/yQbLLJ\/?height=265&amp;theme-id=dark&amp;default-tab=css,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/davidchc\/pen\/yQbLLJ\/\" target=\"_blank\" rel=\"noopener\"><\/a><\/iframe><\/p>\n<p><strong>E[ATTR=&#8221;VALOR&#8221;]<\/strong><\/p>\n<p>Outra possibilidade \u00e9 selecionar o atributo com um valor especifico.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletor: E[ATRIBUTO=&quot;VALOR&quot;]\" src=\"\/\/codepen.io\/davidchc\/embed\/vQmOoV\/?height=265&amp;theme-id=dark&amp;default-tab=css,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/davidchc\/pen\/vQmOoV\/\" target=\"_blank\" rel=\"noopener\"><\/a><\/iframe><\/p>\n<p><strong>E[ATTR$=&#8221;VALOR&#8221;]<\/strong><\/p>\n<p>Voc\u00ea tamb\u00e9m consegue a sele\u00e7\u00e3o via atributo definido que termine com um determinado valor.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletor: E[ATRIBUTO $=&quot;VALOR&quot;]\" src=\"\/\/codepen.io\/davidchc\/embed\/JeNYPM\/?height=265&amp;theme-id=dark&amp;default-tab=css,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Seletores &#8211; Pseudo-classe<\/h2>\n<p>Com <strong>pseudo-classe<\/strong>, voc\u00ea consegue recuperar um estado de um elemento, aplicando assim algum estilo ou selecionando algum elemento na sua forma estrutural<\/p>\n<p><strong>E:HOVER<\/strong><\/p>\n<p>Talvez seja o mais comum que todos utilizam. Quando passa o mouse sobre o elementos, altera algum estilo.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - :hover\" src=\"\/\/codepen.io\/davidchc\/embed\/gQzjBP\/?height=265&amp;theme-id=dark&amp;default-tab=css,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>E:NTH-CHILD(N)<\/strong><\/p>\n<p>Voc\u00ea recupera um elemento filho, baseado numa posi\u00e7\u00e3o ao elemento pai e irm\u00e3os. Voc\u00ea consegue selecionar atribuindo um valor especifico, como <strong>img:nth-child(2)<\/strong>, pegando o segundo elemento, ou parte de uma f\u00f3rmula,como <strong>img:nth-child(2n+1).<\/strong> Basta substituir o valor de n, come\u00e7ando com 0, e voc\u00ea ver\u00e1 os elementos que ir\u00e3o selecionar:<\/p>\n<p><strong>2n + 1 = 2 * 0 + 1 = 1<\/strong><br \/>\n<strong>2n + 1 = 2 * 1 + 1 = 3\u00a0<\/strong><\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E:nth-child(n)\" src=\"\/\/codepen.io\/davidchc\/embed\/VVxBgZ\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>E:LAST-CHILD<\/strong><\/p>\n<p>Voc\u00ea consegue selecionar o \u00faltimo elementos filho.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E:last-child\" src=\"\/\/codepen.io\/davidchc\/embed\/KrRxzR\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>E:ENABLED E E:DISABLED<\/strong><\/p>\n<p>Seleciona o elementos de formul\u00e1rios que est\u00e3o habilitados e desabilitados.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E:last-child\" src=\"\/\/codepen.io\/davidchc\/embed\/MzGqjq\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>E:NOT(VALOR)<\/strong><\/p>\n<p>Seleciona os elementos que sejam diferentes do valor especificado.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E:NOT\" src=\"\/\/codepen.io\/davidchc\/embed\/wQjEqP\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Seletores\u00a0 &#8211; Pseudo-elementos<\/h2>\n<p>Com os <strong>pseudos-elementos,<\/strong> voc\u00ea consegue selecionar partes de um elemento. Para diferenciar dos pseudo-classes, s\u00e3o utilizados <strong>::<\/strong> ao inv\u00e9s de\u00a0 <strong>:<\/strong><\/p>\n<p><strong>E::FIRST-LETTER<\/strong><\/p>\n<p>Voc\u00ea consegue selecionar a primeira letra do elemento.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E::FIRST-LETTER\" src=\"\/\/codepen.io\/davidchc\/embed\/bQMxvv\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>E::BEFORE E E::AFTER <\/strong><\/p>\n<p>Com <strong>::before<\/strong> voc\u00ea consegue gerar conte\u00fado antes de elementos, e com <strong>::after<\/strong>, gerar depois dos elementos.<\/p>\n<p><iframe height=\"265\" style=\"width: 100%;\" title=\"Seletores - E::BEFORE E E::AFTER\" src=\"\/\/codepen.io\/davidchc\/embed\/oQdPPL\/?height=265&amp;theme-id=dark&amp;default-tab=html,result\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Esses s\u00e3o alguns <strong>Seletores CSS<\/strong> que voc\u00ea pode utilizar em seus projetos. Existem diversos outros Seletores CSS que podem ser bastante \u00fateis em determinar em quais elementos usar em algum efeito ou estilo. As vezes voc\u00ea precisa recorrer algum c\u00f3digo <a href=\"https:\/\/www.mxcursos.com\/blog\/tags\/javascript\/\">Javascript<\/a>, entretanto, muitas vezes conseguimos resolver tudo apenas com <strong>Seletores CSS<\/strong>.<\/p>\n<p>Um abra\u00e7o e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea pretende aprender tudo sobre Seletores CSS hoje, voc\u00ea veio ao lugar certo! Para que possamos aplicar qualquer tipo de estiliza\u00e7\u00e3o \u00e9 necess\u00e1rio definir quais os elementos que ser\u00e3o afetados. A forma que isso ocorre \u00e9 com a utiliza\u00e7\u00e3o de seletores. \u00c9 comum a utiliza\u00e7\u00e3o de alguns seletores css, como nome de tag, utiliza\u00e7\u00e3o [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":18620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1177,1233,1257,1256],"class_list":["post-17226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-css","tag-javascript","tag-pseudo-elementos","tag-seletores"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/17226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=17226"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/17226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18620"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=17226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=17226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=17226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}