CSS Pseudo-classes: in 100 Seconds

Поделиться
HTML-код
  • Опубликовано: 21 ноя 2024

Комментарии • 99

  • @Fireship
    @Fireship  4 года назад +92

    ::after this video, check out CSS pseudo-elements ruclips.net/video/e1KpKBHJOrA/видео.html

    • @_abdul
      @_abdul 4 года назад +5

      see what you did there. 😂

    • @curiosdevcookie
      @curiosdevcookie 4 года назад +1

      You are awesome out of many reasons.
      Doing some brainstorming, so not a finite list:
      Of course you’re as bright as all the candles on the data cake put together, however, that’s not all that is worth mentioning:
      You’re _also_ … the concurrently most spirited, friendliest, non-arrogant, most concise teacher I’ve ever had the luck to learn any craft from.
      Personal bonus points:
      I love learning stuff, old and new, how things work, how I can make them un-broken again or restore or optimise or even completely upcycle them… so it’s not hard to make me “fall in love” in a concept, a chair, or a programming paradigm or new best practice or… but my ensuing hunger for more is ravenous and time consuming as I try to be as objective and thorough in my research of x as possible.
      On all things programming and data science, you are one of two guys I don’t even fact-check anymore, because I trust in you having done your homework beforehand 😄 Also your service of putting (trivial or even complex) things in perspective is especially important for me as a beginner in coding.
      Do I need to mention your most welcome usage of emoticons? I guess not 🙃🎉🙆🏻‍♀️
      Thank you so much.

    • @YunisRajab
      @YunisRajab 4 года назад +2

      eyyy

    • @СтепанСвечников-б7ч
      @СтепанСвечников-б7ч 4 года назад

      Recursion

  • @ZikoHendrix
    @ZikoHendrix 4 года назад +33

    Man this was awesome. I hope you do a lot more html and css stuff like this or even more, some simple "projects" with just html and css, because as a beginner in this field that had landed on your channel because of the two and also because i enjoy watching your channel and how you make it special, i wish that you could have some videos dedicated to some random newbies out there.

    • @Fireship
      @Fireship  4 года назад +16

      I plan on making some longer beginner-focused content in the near future :)

    • @ZikoHendrix
      @ZikoHendrix 4 года назад +1

      @@Fireship Thank you

  • @MobiusCoin
    @MobiusCoin 4 года назад +4

    I feel like I know CSS better than most front end devs out there (because I started out with Wordpress Page Builders and after awhile you just NEED to write your own CSS and got very good at it) but I ALWAYS learn something new when I watch your vids. focus-within, I'm definitely going to use that one.

  • @Abhijeet1403199
    @Abhijeet1403199 4 года назад +1

    Whenever I read a documentation I have this guy's voice on the back of my head reading the text, man you're good. Keep up the good work!!

  • @SridTech
    @SridTech 4 года назад +18

    Always 🚿 showering the amazing content at the end. Literally liked every single second.

  • @lowevolution
    @lowevolution 4 года назад +1

    You're the only youtuber, where i have to slow down the video, i.o.t. understand every detail hahaha

  • @osamaa.h.altameemi5592
    @osamaa.h.altameemi5592 4 года назад

    Man. It feels like i have never dealt with pseudo classes before. Totally new perspective. Thx a ton.

  • @rhein-sieg-kreis
    @rhein-sieg-kreis Год назад +1

    Germany's third colour is gold, not yellow. Helpful video, thank you.

  • @AppaloosaMichael
    @AppaloosaMichael Год назад

    this is the superior video on pseudo-elements. i salute you

  • @mivoe99
    @mivoe99 4 года назад

    Those XXX in 100 seconds videos are so excellent. Straight to the point what you need to know about the topic!

  • @TheOpelMurcielago
    @TheOpelMurcielago 4 года назад +63

    1:39 translates to: "As if a little angel pees over your tongue" 😂

    • @WilcoVerhoef
      @WilcoVerhoef 4 года назад +5

      @@gl3nda96 It's a saying, and it's meant to be positive (about good food or a drink)

    • @MauritsWilke
      @MauritsWilke 4 года назад +3

      @@WilcoVerhoef Dutchie here, I think the peeing is the OG one, but most people, if they even use it, say walking.
      As if an angel walks over your tongue

    • @WilcoVerhoef
      @WilcoVerhoef 4 года назад +2

      @@MauritsWilke I'm not sure about that, I hear peeing more often

    • @yt-sh
      @yt-sh 3 года назад

      teehee

  • @TheNewton
    @TheNewton 4 года назад

    Psuedo classes make great diagnostic tools to give elements outlines or image labels to keep an eye on the underlying structure without hunting through devtools. Still experimenting on ::after and ::before with the content property to get similar info like a visual editors label hints or tooltips.

  • @nayeemuddin4625
    @nayeemuddin4625 4 года назад +54

    This was removed... so glad to see this

    • @Fireship
      @Fireship  4 года назад +46

      I decided to take a break last week. There were more important things going on in the world.

    • @nayeemuddin4625
      @nayeemuddin4625 4 года назад +3

      @@Fireship so true...👍

    • @abhinav.sharma
      @abhinav.sharma 4 года назад +3

      @@Fireship Good Call.

  • @glimpsee7941
    @glimpsee7941 4 года назад +3

    Dude you always blow my mind. You have taught me so much recently.

  • @charles4k8k
    @charles4k8k 2 года назад

    finally becoming more advance in my css.gonna be master like a karatee master just css

  • @rehmanalimomin6569
    @rehmanalimomin6569 4 года назад +1

    No doubt this video has zero dislikes.
    This channel deserves it.
    (4755 views)

  • @DesertCookie
    @DesertCookie Год назад +9

    Just FYI, according to the German constitution, the flag is black, red, gold - not yellow. Fun fact, I guess.

    • @Hamzahharoon
      @Hamzahharoon 11 месяцев назад +2

      As a German, I can confirm this random fun fact.

    • @Lightyboii
      @Lightyboii 11 месяцев назад

      ​@@Hamzahharoonyes same

    •  Месяц назад

      😂😂 schwarz rot gold 🥹

  • @FilledStacks
    @FilledStacks 4 года назад +1

    Great video Jeff!

  • @jamesward1210
    @jamesward1210 4 года назад

    Just discovered this series. This is amazing. Thanks for sharing!

  • @azatecas
    @azatecas 4 года назад

    you keep outputting quality and i keep consuming quality

  • @mathix420
    @mathix420 4 года назад

    Nice video as always !! Hope you can make a video about firebase analytics and big query after your duly deserved break

  • @estym_
    @estym_ 4 года назад

    That's really well explained for such a short video !

  • @TheNewton
    @TheNewton 4 года назад

    Psuedos can replace some js UX, there's a post on devDOTto about using :not and :placeholder-shown to hide search buttons until a user types something.

    • @Fireship
      @Fireship  4 года назад

      :focus-within is also useful for replacing JS on dropdowns and accordions.

  • @alemalohe
    @alemalohe 4 года назад

    this is automated learning! Wow

  • @thriftykapila8420
    @thriftykapila8420 4 года назад +28

    Create a web app using Robinhood api tutorial

    • @Fireship
      @Fireship  4 года назад +19

      That's a unique request, added to the list.

    • @thriftykapila8420
      @thriftykapila8420 4 года назад +1

      @@Fireship thanks a lot, eagerly wait for it 😍😍

  • @anirbandas12
    @anirbandas12 4 года назад

    Super. Cleared so many concepts.

  • @tsrcodes
    @tsrcodes 4 года назад

    800+ likes without a dislike 🔥🔥

  • @flavioespanol8868
    @flavioespanol8868 4 года назад

    1.3k likes 0 dislikes, well done

  • @garyshker20
    @garyshker20 4 года назад +3

    Saga in 100 seconds?))

  • @phani2739
    @phani2739 4 года назад

    Hey your explanation is 👏. Do a video on websocket pls.

  • @volcano3398
    @volcano3398 4 года назад

    Now I know how to make grouped buttons

  • @akariamano5544
    @akariamano5544 2 года назад

    as for me pseudo-elements are one of the hardest thing to wrap your head around.

  • @solvedfyi
    @solvedfyi 4 года назад +2

    What do you call :before and :after since they aren't here?
    Edit: Never mind, second video answered this

  • @wepranaga
    @wepranaga 4 года назад

    you're just next level

  • @cormanec210
    @cormanec210 4 года назад

    Glad you brought this video back up :D

  • @akashkumar_ks
    @akashkumar_ks 4 года назад

    That 1 dislike is from someone who present :not(like) accidentally

  • @BharadwajGiridhar
    @BharadwajGiridhar 4 года назад

    You're my inspiration.

  • @ivanp7697
    @ivanp7697 4 года назад

    Awesome! What about websockets, web workers and IndexedDB in 100s? :)

  • @jaimerojas6578
    @jaimerojas6578 4 года назад

    This was straight forward my God loved it!

  • @guccigreatness4925
    @guccigreatness4925 4 года назад

    who the hell disliked this video all the firship vids are fire 🔥🙏👍😅
    fireship.io we all luv u ...no homo😅

  • @jlbardinas1
    @jlbardinas1 4 года назад

    short and sweet 🙌

  • @WilcoVerhoef
    @WilcoVerhoef 4 года назад

    Dit is hilarisch!

  • @samirclash6605
    @samirclash6605 4 года назад

    Can you do a video about mean stack mobile apps

  • @akeemolushola9398
    @akeemolushola9398 4 года назад

    @Fireship uses Icon like a text a lot in all his video. How is he adding those beautiful icons?

  • @this.channel
    @this.channel 4 года назад

    Wow, I thought I knew psudo classes.

  • @ricardorien
    @ricardorien 4 года назад

    Man, i love you.

  • @KubaSobecki
    @KubaSobecki 4 года назад

    p[lang='es']
    p:lang(es)
    Any difference between these selectors?

  • @mohamedaymanerrahmouni
    @mohamedaymanerrahmouni 4 года назад

    Thanks!

  • @amantudu4233
    @amantudu4233 4 года назад

    Thank you

  • @silnalapa
    @silnalapa 3 года назад

    Is there any option to look at your code changes in real time like showed in the video?

  • @SuperSurendraverma
    @SuperSurendraverma 4 года назад

    I love javascript

  • @nicobleiler
    @nicobleiler 4 года назад

    Why was the first upload removed

  • @joostvanassenbergh180
    @joostvanassenbergh180 3 года назад

    How do I make it so it doesn't select the children of an element,
    I want to select a class but not all the children off everything with that class, is there a way to do that?

  • @sameshbajracharya3391
    @sameshbajracharya3391 4 года назад

    Why would you want your text to be 3 colors? Please reply

  • @arnu515
    @arnu515 4 года назад +1

    Before and after pseudo elements?

    • @LESLEYYY0
      @LESLEYYY0 4 года назад +1

      He released that video at the same time as this one

    • @arnu515
      @arnu515 4 года назад +1

      @@LESLEYYY0 oh

  • @michelribbens8014
    @michelribbens8014 4 года назад

    'alsof er een engeltje over je tong piest'
    Hahaha how did you come up with this Dutch text?

  • @AntiWanted
    @AntiWanted 4 года назад

    Nice

  • @namoradinhahunter7086
    @namoradinhahunter7086 4 года назад

    100 sec of Puppeteer

  • @shashikant1166
    @shashikant1166 3 года назад

    why doesn't this work with classes

  • @justine_chang39
    @justine_chang39 4 года назад +1

    ahhh i didn't know those were called pseudo classes :D

  • @andronasef
    @andronasef 4 года назад

    computer science in 100 seconds

  • @copycz2009
    @copycz2009 4 года назад

    cool

  • @AmxCsifier
    @AmxCsifier 4 года назад

    To "force" hover, I right click the element then click inside devtools, the element stays hovered

  • @_julian
    @_julian 3 года назад

    Ich bin nicht aus Zucker!

  • @fancywrong6405
    @fancywrong6405 4 года назад

    BUT I WANNA TAKE R E A L CLASSES!!1!

  • @madebytl
    @madebytl 4 года назад +1

    Could I have 200 seconds?

  • @DarshitHedpara
    @DarshitHedpara 4 года назад

    Three.js in 100 seconds

  • @utpalsavaliya761
    @utpalsavaliya761 4 года назад +1

    750th like!

  • @bama2619
    @bama2619 Год назад +1

    man, that is too much and too fast. I recommend splitting into different parts and give more reasoning for why the pseudo classes needed.

  • @Vimukthi12348
    @Vimukthi12348 4 года назад

    does Fireship pin any comments?

    • @Fireship
      @Fireship  4 года назад +1

      Yes, I'll pin an exceptional comment.

    • @Vimukthi12348
      @Vimukthi12348 4 года назад

      @@Fireship I was just kidding btw, was trying to make it ironic if you were to pin it. Anyways, great content :D love it.

  • @oliverbriscoe243
    @oliverbriscoe243 4 года назад +1

    liar this is 119 seconds

    • @sodiboo
      @sodiboo 4 года назад

      actually only about 106 for the content

  • @App1eLetsPLays
    @App1eLetsPLays 4 года назад

    Kleinvieh macht auch mist