Dou aula de CSS faz 10 anos. Esperei isso por todo esse tempo. Tive que aprender JS só para contornar a falta desse seletor. Não sei porque demorou tanto.
Simplifica muita coisa.. mas uma outra forma que daria pra executar essa ideia (de forma parcial) apenas com o uso de CSS é com o uso do nth-of-type... Um exemplo simples para estilizar uma tag caso ela contenha filhos do tipo seria fazer p a:nth-of-type(n) { color: red; }, essa mesma regra pode ser aplicada em classes e ids, caso você queira estilizar tags específicas.. mas com certeza a leitura do has ainda é muito mais simplificada e também abre a possibilidade de estilizar alguns elementos em situações que o nth-of-type não conseguiria, que é por exemplo quando tiver um determinado valor selecionado na tag select como você mostrou no vídeo.... ótima dica e ótima funcionalidade para o css!
@@dpwoficial Ah sim, acho que interpretei errado. O :has() aplica o estilo ao elemento "pai" da regra.. Boa, realmente é totalmente diferente, isso ajuda muito a não ter que inserir JS em alguns casos
Caraca, ficou muito muito mais facil de fazer coisas q antes eram tao complexas! Gostei muito e com certeza vou usar bastante! Parabens pela aula e didática!
Muito boa essa adição. Sempre tive problemas com isso, pois pra contornar a falta do has, eu tinha q usar js e acabava tendo que controlar um js + css pra uma coisa que deveria ser simples. Vai facilitar muito esse has
Tárcio por favor, faz ai um mini curso de web Accessibility. aqui no youtube tem quase nada em pt. eu tenho procurado referencias para leitura e n encontro quase nada. porfavor, faz um mini curso ou mesmo uma live para introduzir esses conceitos e talvez com um mini projecto pratico.
Oi Márcio! Sou UX/UI e estou à procura de um curso completo de front-end. Normalmente são muito superficiais, sem conhecimentos atualizados de OOCSS, e interação com o deploy do designer. Gostei muito da forma como ensinas. Tem algum curso que recomendas? Vi que usas o Sublime, algum motivo? Tenho preferência pelo Visual Studio como IDE, mas adapto
Oi, Marta. Tudo bem? Curso completo de front-end ainda não temos, mas temos um sobre boas práticas, convenções e boas práticas que aborda OOCSS e outras metodologias. O link tá na descrição aqui do vídeo; cadastra seu e-mail que vamos abrir turma ainda este ano. PS: esse editor não é o Sublime, é o site codepen.io/
Parabéns pelo conteúdo excelente didática. Muito bom saber que o CSS está evoluíndo nesse aspecto. Só de pensar que possíveis elementos poderão ser exibidos ou não com CSS puro fez meu coração ficar mais quentinho!
Legal, embora ambos atualmente ainda são possíveis com CSS então não vejo muita novidade: Primeiro caso: só adicionar uma classe pra diferenciar e identificar a imagem dentro Segundo caso: pode sim envolver em uma label, e ter um dentro logo após o input pra seguir a mesma lógica do :checked + span (sem precisar de JS) Terceiro caso: poderia usar o css pra figcaption normal, se não houver figcaption simplesmente o css não teria elemento pra aplicar a borda
Primeiro caso: foi feito sem classe adicional. Segundo caso: Foi feito sem a necessidade de tags adicionais. Terceiro caso: A regra não é para aplicar borda no figcaption.
Ainda não é possível "oficialmente" nem com CSS puro; é um suporte que vai chegar em breve aos navegadores. Uma vez que esteja OK essa parte, aí o styled-componentes tem que fazer a mágica por debaixo dos panos para passar o código para CSS usando :has(), entendeu?
@@dpwoficial infelizmente eu perdi a inscrição para o curso que saiu em dezembro do ano passado. Quando vi o e-mail já tinha se passado um dia, infelizmente. Quando pretende abrir outra turma?
Meu Deus cara, é melhor do que eu imaginava, já tava de olho nele mas não cheguei a usar porque o suporte está fraco ainda, mas e quanto ao PostCSS, tem como usar com ele? Eu fico me perguntando se tem porque parece um negócio meio que impossível de aplicar apenas com CSS fazendo uma transformação, que é o que o PostCSS faz
Não sei se o PostCSS tem alguma coisa... Não cheguei a procurar. Se encontrar, dá uma ideia. O problema é que eu já estou começando a pensar nos seletores com :has() com antecedência e tô começando a ter dificuldade de viver sem... aeueahe
@@dpwoficial É por isso que eu ainda não me aprofundei nele, eu sei que vou ficar dependente, rs, é um negócio muio revolucionário pro CSS, não vejo a hora de ter 90% de uso no CanIUse
O @supports não é para dar suporte antecipado; ele somente verifica se tem ou não suporte (th-cam.com/video/7d23VlVvmQw/w-d-xo.html). Chrome e Safari já já vão suportar (caniuse.com/css-has); o restante, não tenho ideia. =/
Sass não é para trazer recursos ainda não lançados para CSS; é um pré-processador CSS. Ele só permite escrever de um jeito diferente, mas, no final, usa CSS puro. Então, só quando tiver suporte para CSS puro que dá para usar com Sass também, entendeu?
gente alguem me explica o que é o outline? as vezes eu dou "none" nele em determinados componentes, tipo inputs e buttons pq me ensinaram assim, mas n sei oq de fato ele é
não seria mais fácil colocar o texto dentro de uma tag span e utilizar a mesma lógica que usou para o label ao invés de usar javascript?? apesar disso :has tá ai pra facilitar várias outras coisas
@@dpwoficial, tipo, foi um elogio... 99,9999999% dos profissionais da área de informática não sabem pronunciar "sintaxe" corretamente. Quando vejo um que sabe, escorre até uma lágrima.
Tárcio é o cara mais foda que conheço no CSS. Sempre com uma PUTA DIDÁTICA, explica bem pra caramba, simples e direto! Parabéns!!
Que eeesso, Isack! Brigadasso! :D
Dou aula de CSS faz 10 anos. Esperei isso por todo esse tempo. Tive que aprender JS só para contornar a falta desse seletor. Não sei porque demorou tanto.
De uns anos para cá, o CSS tá avançando bem rápido. A partir de agora, vamos esperar cada vez menos por novas features como essa. :)
E pq n aprendeu js antes? Quem programa só com css?
CSS é lindo demais!!!
😭
Oque antes era apenas uma linguagem turing machine hoje é turing complete por cálculo e condicionais. CSS envoluindo cada vez mais!
o/
Nossa, incrível!! Em breve o CSS vai tomar bastante espaço do Javascript, grazadeus
"grazadeus" 😆
Muito bom meu camarada, estudamos no Antônio Carlos. Sempre muito inteligente e didático.
Faaala, Jorge! Sumidaaasso! :D
@@dpwoficial Abraço meu amigo e muito sucesso na carreira.
Simplifica muita coisa.. mas uma outra forma que daria pra executar essa ideia (de forma parcial) apenas com o uso de CSS é com o uso do nth-of-type... Um exemplo simples para estilizar uma tag caso ela contenha filhos do tipo seria fazer p a:nth-of-type(n) { color: red; }, essa mesma regra pode ser aplicada em classes e ids, caso você queira estilizar tags específicas.. mas com certeza a leitura do has ainda é muito mais simplificada e também abre a possibilidade de estilizar alguns elementos em situações que o nth-of-type não conseguiria, que é por exemplo quando tiver um determinado valor selecionado na tag select como você mostrou no vídeo.... ótima dica e ótima funcionalidade para o css!
Não seria a mesma coisa, Calvin.
No exemplo, você estaria estilizando o link, não o parágrafo.
O seletor-chave de :has() é completamente diferente. :)
@@dpwoficial Ah sim, acho que interpretei errado. O :has() aplica o estilo ao elemento "pai" da regra.. Boa, realmente é totalmente diferente, isso ajuda muito a não ter que inserir JS em alguns casos
@@calvinteixeira1087 Isso mesmo. O :has() subiu o CSS para outro nível!
Eureka! Genial... obrigada!
Tudo nosso. ;)
Top demais
CSS FTW
Caraca, ficou muito muito mais facil de fazer coisas q antes eram tao complexas! Gostei muito e com certeza vou usar bastante! Parabens pela aula e didática!
Com certeza, Elton. Eu escrevi aí no título e é verdade: vai mudar o CSS!
Muito boa essa adição. Sempre tive problemas com isso, pois pra contornar a falta do has, eu tinha q usar js e acabava tendo que controlar um js + css pra uma coisa que deveria ser simples. Vai facilitar muito esse has
Justamente! CSS FTW o/
Eu não sou front, sou designer. Mas amo css, e cada dia o amor cresce mais kkkk
Mais 2 ou 3 novas features e você será convertido... rsrs
@@dpwoficial kkkkk né muito difícil não
Mano melhor canal, já primeira vez que vi esse tal de has ai, já gostei que trás novidades
Muito obrigado! 😁
Cara, o CSS está cada dia mais incrivel 😄
Sim, tá sensacional! 😭
O correto é a CSS
@@MarcosAntonio-hp9rt Se for para ser extremamente preciso, seria "as CSS". =P
@Cailton Oliveira Costa Tipo isso?
blog.logrocket.com/native-css-nesting/
@Cailton Oliveira Costa Tipo isso? blog.logrocket.com/native-css-nesting/
Conteúdo bom demais!
vlwww
Muito bom o vídeo e explicação 👍
Obrigado 👍
perfeito pra que usa wordpress e um adianto !! obg professor
De nada. Volte sempre.
Mas um função pra minha engine game css 😋😍😍😍😍
Ó, sério isso? Que massa.
Meninão.. Saudades! Parabéns pelos vídeos.. Acompanho sempre que possível! Você é referência em CSS no Brasil 👊
Não some, pô! 😭
Tárcio por favor, faz ai um mini curso de web Accessibility. aqui no youtube tem quase nada em pt. eu tenho procurado referencias para leitura e n encontro quase nada. porfavor, faz um mini curso ou mesmo uma live para introduzir esses conceitos e talvez com um mini projecto pratico.
Boa ideia!
Enquanto não fica pronto, dá para você consultar nossos artigos no blog: desenvolvimentoparaweb.com/tag/acessibilidade/
@@dpwoficial valeu Tárcio, vou esperar com grande animo.
Muito bom!!!!! Imagine fazer várias combinações com esse carinha
Tô pensando em fazer uma live para mostrar mais possibilidades... :has() é realmente INCRÍVEL!
Amei!
😊
Ótimo conteúdo !!!!!
Muito obrigado, Clinton!
Sensacional!
Mudança de tema 🧡
o/
Oi Márcio! Sou UX/UI e estou à procura de um curso completo de front-end. Normalmente são muito superficiais, sem conhecimentos atualizados de OOCSS, e interação com o deploy do designer. Gostei muito da forma como ensinas. Tem algum curso que recomendas? Vi que usas o Sublime, algum motivo? Tenho preferência pelo Visual Studio como IDE, mas adapto
Oi, Marta. Tudo bem?
Curso completo de front-end ainda não temos, mas temos um sobre boas práticas, convenções e boas práticas que aborda OOCSS e outras metodologias. O link tá na descrição aqui do vídeo; cadastra seu e-mail que vamos abrir turma ainda este ano.
PS: esse editor não é o Sublime, é o site codepen.io/
Sensacional
o/
Poderoso demais! Sempre procuro usar css para fazer maior parte das coisas antes de partir para o uso JavaScript.
Eu também! E cada vez mais está sendo possível com as novas features que vão chegando em CSS.
Sensacional!
Realmente, é demais!
cara.. que legal!
👍
Eu só uso Styled components, mas é mt bom saber disso, vai ajudar mt
Já já tá chegando no styled.
*_Wow!_* Achei super incrível tanto a novidade como todo o conteúdo apresentado.
Bom demás!
Parabéns pelo conteúdo excelente didática. Muito bom saber que o CSS está evoluíndo nesse aspecto. Só de pensar que possíveis elementos poderão ser exibidos ou não com CSS puro fez meu coração ficar mais quentinho!
Muito obrigado e concordo totalmente, Bruno!
Seu canal é top de mais, confesso que me embanano muito com CSS, mas seus vídeos estão me ajudando bastante. Obrigado.
Fico feliz em saber, Leandro! Estamos aqui para isso. :)
Parabéns pelo conteúdo. Muito bem explicado.
Obrigado, Valdemiro.
muito legal, deixou bem claro pra mim muitas coisas, agora só preciso praticar mais, obrigado ! ✌✌
Opa, tamos aê.
mt bomm!!
vlwww
ótima didática parabéns mano ! muito bom !
Muito obrigado!
Cara, que didática perfeita!!!
Opa, ainda chegamos lá, Júlio... rs
Muito bom
Demais!
QUE VÍDEO BOM! Primeira vez que vejo um vídeo do teu canal, TH-cam me deu uma ótima recomendação.
Que bom que gostou. Compartilha com a galera para eles também receberem essas recomendações.
Finalmenteeeee
\o/
Legal, embora ambos atualmente ainda são possíveis com CSS então não vejo muita novidade:
Primeiro caso: só adicionar uma classe pra diferenciar e identificar a imagem dentro
Segundo caso: pode sim envolver em uma label, e ter um dentro logo após o input pra seguir a mesma lógica do :checked + span (sem precisar de JS)
Terceiro caso: poderia usar o css pra figcaption normal, se não houver figcaption simplesmente o css não teria elemento pra aplicar a borda
Primeiro caso: foi feito sem classe adicional.
Segundo caso: Foi feito sem a necessidade de tags adicionais.
Terceiro caso: A regra não é para aplicar borda no figcaption.
Que aula meus amigos!!! Valeu por esse conteudo maravilhoso!!
Que isso, eu que agradeço o comentário. :)
Cara! Você explica bem demais, parabéns
Muito obrigado! 😁
didática mt boa e ótimos exemplos! +1 sub
vlwww
que coisa incrível! ansioso pra poder usar.
Dois!
Parabéns pelo canal, didática e tudo mais. Excelente. Virei inscrito.
Vlw, Marcelo!
Sempre com uma didática afiadíssima. Muitos parabéns!
vlwww
Adorei o conteúdo, realmente é MUITO útil! Queria saber se tem como usar juntamente com o Styled-components, até onde tentei, não tive sorte.
Ainda não é possível "oficialmente" nem com CSS puro; é um suporte que vai chegar em breve aos navegadores.
Uma vez que esteja OK essa parte, aí o styled-componentes tem que fazer a mágica por debaixo dos panos para passar o código para CSS usando :has(), entendeu?
@@dpwoficial Entendi sim! Obrigado pela paciência em explicar e pelo conteúdo. Espero por mais vídeos assim!
@@cometarioxD Eu que agradeço a participação. :)
Aos pouco css ta tirando muito funcionalidade que só era possível com javascript
Sim. Daqui a pouco teremos o JS-in-CSS. =P
O foda é que até poder usar isso com segurança em todos navegadores demora tanto.... Isso sempre me deixa de cara com novas features de linguagens
Demora um pouco mesmo... Mas já já taí pra gente usar à vontade. ;)
@@dpwoficial kkkk verdade, mas bate uma ansiedade pra já sair usando
Esotu há meses ansioso por um curso seu de css, convenções, etc. Quando vai sair, Tárcio:
Daqui a pouco vamos abrir uma turma nova; cadastra seu e-mail para saber certinho: www.cssalemdosensocomum.com.br/
@@dpwoficial já cadastrei meus dois e-mails para não passar despercebido 👀
@@thalesvictor3212 haha Aí sim. Pode deixar que em breve vamos entrar em contato sobre isso. ;)
@@dpwoficial infelizmente eu perdi a inscrição para o curso que saiu em dezembro do ano passado. Quando vi o e-mail já tinha se passado um dia, infelizmente. Quando pretende abrir outra turma?
@@thalesvictor3212 Não sei ao certo, mas não deve demorar muito. Fica ligado nos e-mails. 👍
Oloko, adicionaram uma "condicional" no CSS
ueheuhe Algo parecido... ;)
interessante!
Demás!
Meu Deus cara, é melhor do que eu imaginava, já tava de olho nele mas não cheguei a usar porque o suporte está fraco ainda, mas e quanto ao PostCSS, tem como usar com ele? Eu fico me perguntando se tem porque parece um negócio meio que impossível de aplicar apenas com CSS fazendo uma transformação, que é o que o PostCSS faz
Não sei se o PostCSS tem alguma coisa... Não cheguei a procurar. Se encontrar, dá uma ideia.
O problema é que eu já estou começando a pensar nos seletores com :has() com antecedência e tô começando a ter dificuldade de viver sem... aeueahe
@@dpwoficial É por isso que eu ainda não me aprofundei nele, eu sei que vou ficar dependente, rs, é um negócio muio revolucionário pro CSS, não vejo a hora de ter 90% de uso no CanIUse
Você sabe quando mais ou menos o :has() vai ser suportado pelos navegadores sem usar os suports????
O @supports não é para dar suporte antecipado; ele somente verifica se tem ou não suporte (th-cam.com/video/7d23VlVvmQw/w-d-xo.html).
Chrome e Safari já já vão suportar (caniuse.com/css-has); o restante, não tenho ideia. =/
Qual é essa plataforma que usa para fazer os codigos?
No caso desse vídeo, foi tudo no codepen.io/
7:40 eu nao entendi essa parte, pq exatamente o blue foi impresso?
Porque o :has() de cima tem id como seletor, que tem especificidade maior (mesmo vindo antes no código).
top!!!
vlwww
Vindo aqui apenas para reclamar q já faz quase 1 ano desse atributo e o Mozilla ainda não incluiu.
Devagar e sempre... 😬
vim do futuro para dizer que o css vai ser considerado linguagem de programação xD
Famoso JS-in-CSS.
Ele já está funcionando com o npm sass ?
Sass não é para trazer recursos ainda não lançados para CSS; é um pré-processador CSS.
Ele só permite escrever de um jeito diferente, mas, no final, usa CSS puro.
Então, só quando tiver suporte para CSS puro que dá para usar com Sass também, entendeu?
Que loucura!! Já posso usar?!?!
Só experimentalmente, mas daqui a pouquinho, tá liberado oficialmente. :)
@@dpwoficial Legal 😄
gente alguem me explica o que é o outline? as vezes eu dou "none" nele em determinados componentes, tipo inputs e buttons pq me ensinaram assim, mas n sei oq de fato ele é
developer.mozilla.org/pt-BR/docs/Web/CSS/outline
Vi no canIuse que o firefox ainda n da suporte (por default)...será quando que habilitam isso igual no chrome?
Não faço ideia.
não seria mais fácil colocar o texto dentro de uma tag span e utilizar a mesma lógica que usou para o label ao invés de usar javascript?? apesar disso :has tá ai pra facilitar várias outras coisas
Daria também, mas é uma solução que obriga a "sujar" o HTML em busca de resultados de CSS.
Foi um exemplo do "errado" para mostrar o "certo".
Então podemos dizer que o CSS pode ser considerado uma pseudo linguagem de programação? :D
JS-in-CSS
Bruxaria purinha...
🧙
Não ter suporte para o Firefox barra legal o uso :(
Daqui a pouco chega.
O tanto de funçoes em JS q eu ja fiz pra resolver esse tipo de b.o ... kkk
haha Todos nós, meu amigo. Todos nós...
Já ta funcionando? Posso aplicar no meu projeto?
9:12
Ja posso falar que sou programador CSS?
Poder pode... ¯\_(ツ)_/¯
Alguém de info que sabe pronunciar sintaxe corretamente??? Sinal do Apocalipse, no mínimo
Hã?!
@@dpwoficial, tipo, foi um elogio... 99,9999999% dos profissionais da área de informática não sabem pronunciar "sintaxe" corretamente. Quando vejo um que sabe, escorre até uma lágrima.
@J C Ahh, agora entendi! auheauhe ✌️
O css tá aos poucos parecendo mais uma linguagem de programação, ou é impressão minha?
Corretíssimo, Lauro. E isso até me preocupa um pouco...
testei o :has com :checked no Firebox e só tá alterando a cor depois qe atualiza a page, não sei se é bug
9:12
Opa, tem alguma limitação pra usar ele? Tentei no meu editor, tentei em vários sites e fui no codepen e não está funcionando '-'
Dá uma olhada em 9:12 que explica sobre o suporte atual.
@@dpwoficial foda, eu fui ver lá e meu browser não suportava'-'
Começo do fim do JS
JS-in-CSS
a tendência é o CSS substituir o JS por inteiro
Será que um dia chega lá?
Agora da pra chamar CSS de programação? kkk
Ainda falta muito... =P
Noice
haha Noice!
Falou sintasse parei 😕
👋
Sensacional!
o/