PB101: L18 - Programmatic Styling With Pseudo Classes (Critical)

Рет қаралды 7,351

10 ай бұрын

At the beginning of this course, I promised to take you from chump to champ with each video.
Well, this is one of those videos that's going to bring you multiple levels higher.
The ability to style elements programmatically is imperative for scalability, maintainability, and the proper construction of dynamic websites. Pseudo-classes are what allow us to do this programmatic styling.
In this video you'll learn:
✅ What are pseudo classes?
✅ :hover
✅ :first-child
✅ :last-child
✅ :nth-child()
✅ :nth-child() vs :nth-of-type()
✅ :nth-last-child()
✅ :nth-last-of-type()
✅ :nth(an+b) formula
✅ :nth() in reverse
✅ :nth() chains
✅ :not()
✅ :not() chains
✅ :is()
✅ :where()
✅ :is() vs :where()
✅ :has()
✅ Combo pseudo classes
✅ :focus
✅ :focus-within
✅ :empty
It's going to be like drinking from a firehose, but my main objective is to show you some potent techniques so you know what's possible. Once you know something is possible, you can look it up again later (or return to this video).
As always, if you have any questions, you can drop them below. Make sure you thumbs up this video to show your support.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

Пікірлер: 83

@Gearyco 10 ай бұрын

Are you swimming or drowning after this one?

@jamorahcito 10 ай бұрын

canoeing on my new pseudo canoe.

@pandaosa9 10 ай бұрын

I like your swimming analogy.

@WebDevMastery 10 ай бұрын

Flying sir

@MyKelvin01 9 ай бұрын

Surfing 🌊🏄

@alyssajorgensen3279 7 ай бұрын

Swimming, but now discovered that I'm in the ocean and not a pond. I've used a lot of these pseudo classes before to custom style badly made straight jacket page builders and plugins as janky workarounds, but knowing how to use them programmatically on a website that is built right is really exciting! You explained them beautifully in context, so it's easy to understand the possibilities! Thank you, thank you, thank you!

@clemtw 9 ай бұрын

This is just absolutely enlightening. I've not seen anyone explained things this clearly and with context and a great sense of humor. Finally, I now have a structure to build my learnings on as a beginner, and you, Maestro Kevin, is by far the best teacher hands down. Speaking of hands down respect, those caps that you wear and having a brown belt in BJJ, oh C'mon now !!! Thank you so much for taking time in making these videos. 🙏💪

@Gearyco 9 ай бұрын

Glad it was helpful!

@ElementoryMyDearWatson 2 ай бұрын

I've spent days trying to find tutorials on the nth-child concept. This is the only one where I can finally say "Ahhh, right, NOW I get it". Kev 'The Dev' Geary does it again. Once again, Indebtted to you sir.

@raziel8799 9 ай бұрын

Thank you so much. It's so funny how you can become extremely educated in every topic nowadays by just finding the right resources via KZfaq, Google and AI.

@Gearyco 9 ай бұрын

So much easier than the old days!

@BGdev305 10 ай бұрын

You killed this one! Aside from this being a REALLY good lesson it moves along at a nice pace. The CSS that you touched on here is a definite need to know, breaking out of the builder's inputs and writing it by hand is MAJOR.. it helps one to see 'how' it works vs just seeing 'that' it works.. kudos on that. This video method is actually better than you being 'live' because you're in the chat and able to see and respond to questions in real-time.. dope!

@jzea5605 10 ай бұрын

Love it love it love it. Survived, but I actually found the basic stuff harder . I guess the professional, maintainable, best practises, scalable basics are difficult because it takes practise of the skills you've taught whilst also unlearning years of chump habits. This is easily the longest I've committed to one channel or playlist. This is gold. The most valuable course I've ever done and it's free, I joined the inner circle just as a thank you let alone to learn even more. Really excited for the remaining lessons. Industry bar-raising content here.

@Gearyco 10 ай бұрын

🙏

@delianagency 10 ай бұрын

Pure gold once again! Thank you, Kevin, for all this knowledge!

@JanWessels 10 ай бұрын

Still swimming Kevin! Although this is a tough one, but I can see the superpowers of CSS explained in a great informative way. Thanks again!

@eucalyptech 9 ай бұрын

Pure gold, thank you and well done Kevin 👍

@Gearyco 9 ай бұрын

Very welcome

@user-cq3xo6tx1t 8 ай бұрын

The best pro lesson they are. Clear and concise. Thanks

@VascoDanielBaiao 7 ай бұрын

Thanks for all this great content videos you've been sharing here. ★★★★★ for PB101 and your teaching methods.

@Gearyco 7 ай бұрын

You’re awesome thank you.

@LupusDesign 10 ай бұрын

Still alive and floating! Another platinum episode!

@jzea5605 10 ай бұрын

Hoping the scope of 101 content also covers e-commerce, API integration, optimisation, practical animation, and form building for upcoming videos (personal wishlist and understand these are largely a compound of previous lessons). Again, couldn't be happier with the course thus far. Maybe a question for the inner circle but was curious about how multiple databases work once you need to scale to very large site's.

@Gearyco 10 ай бұрын

Won’t cover api, ecomm, or animation. Forms and api are considered out of the scope of page building. Optimization = maybe!

@jzea5605 10 ай бұрын

@@Gearyco looking forward to it. Thanks again.

@michal_kotarba 10 ай бұрын

Fantastic tutorial!

@rubengarciajr 10 ай бұрын

This should be a innercircle training! so much goodness in this video!

@web-atelier 10 ай бұрын

Excellent and usefull video, excellent teacher, thanks.

@PswACC 9 ай бұрын

It would have been useful if you explained how CSS combinators work first and then progressed into styling with pseudo classes. (Don't recall this topic being covered in a dedicated video but used throughout the course.) E.g. + (Adjacent Sibling Selector): Selects an element that is immediately preceded by a specified element. * (Universal Selector): Selects all elements on the page. > (Child Selector): Selects all direct children of a specified element. (Descendant Selector): Selects elements that are descendants of a specified element, regardless of their level in the hierarchy. ~ (General Sibling Selector): Selects elements that are siblings of a specified element and share the same parent. Overall, great video though.

@Gearyco 9 ай бұрын

Already covered universal and child earlier in course

@kappesante 10 ай бұрын

this one was great

@jacobwwarner 5 ай бұрын

59:19 Beautiful presentation of changing the layout structure of the grid when there's a missing element. I'm more used to React development, so I can imagine this being immensely helpful in situations where your container grid can have a variable amount of components contained within it.

@TheMaxiviper117 3 ай бұрын

another option is also using auto-fit. grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

@WolfG11 10 ай бұрын

New episode = Popcorn time!

@Danishevskiy 9 ай бұрын

great lesson! thanx a lot ★★★★★

@rickdugmore 7 ай бұрын

I'm drowning... FML 🤯

@John.Rearden 10 ай бұрын

Good lesson

@ReubenHochstetler 9 ай бұрын

Awesome training. I’ll be sad when this series is over.

@deividaspaulauskas2751 10 ай бұрын

Nice one :)

@jhonnatanr 10 ай бұрын

Looking forward to this one! I've been loving this series and because of it, I'm all in ACSS and Frames. Have you done something like ACSS and Frames 101? If not, is that something you would consider doing? I think an in depth 101 on ACSS and Frames would be incredibly helpful for a lot of people and might even convert people in getting them.

@Gearyco 10 ай бұрын

There’s a really good video called getting started with Automatic.css

@jhonnatanr 10 ай бұрын

@@Gearyco Thank you for your reply, yes, I have seen it, I will go ahead and watch it again and binge on the whole ACSS channel since as you mentioned in the video there is a bit of a learning curve.

@crazy4uonly21 5 ай бұрын

why does it have Exculde when it's in include class? Because the course is free huh lol. I'm dying to laugh. I needed that laugh coz my brain was already fried with so much information. I love your content and your humor. thank you for what you doing for this Chumps :)

@Gearyco 5 ай бұрын

💪🏻

@mikkey0001 10 ай бұрын

chumpness -10%

@dariuszak1402 10 ай бұрын

great tutorial as always. thank you. i noticed sometimes the css editor panel "changes" the text - it detaches the word "root" from the psuedo element. it looks like a bug... eg. root :hover becomes detached even though originally it was root:hover. Now i can see you write root > *:hover. just wondering if the asterix could be skipped?

@bluetheredpanda 10 ай бұрын

Another great video! Curious what’s next in the curriculum. Have you decided already? (And is it public?) I’m guessing query loops, or advanced uses of data-attributes

@Gearyco 10 ай бұрын

We already covered query loops. I haven't decided yet.

@bluetheredpanda 10 ай бұрын

@@Gearyco whoops, my bad. Looks like I need to go back and rewatch some episodes (perfect excuse not to work today 😂)

@mcostales84 10 ай бұрын

On your last example, how can I make the grid structure 3 or 2 programatically? Let's say sometimes there is only 1 wrapper empty, and other times there are 2 wrappers empty. Is there a way to do it? Check the amount of :empty elements?

@Gearyco 9 ай бұрын

If there's only ever going to be one or two, you can use :has to check for a 2nd empty item.

@OscarObians 10 ай бұрын

2:52 What extension are you using to have the mouse zoom effect?

@Gearyco 10 ай бұрын

Pro Mouse

@DesignRobPearce 10 ай бұрын

How about the column auto options for when you have 1,2,3 empty grids for example on a larger grid?

@Gearyco 10 ай бұрын

It can only find DOM elements that don’t have content. An empty grid cell isn’t a DOM element.

@Jim.Hummel 2 ай бұрын

I may still be sputtering from the firehose but at the 59:00 minute mark, you're discussing a 4-column grid being modified to a centered 3-column grid when 1 item is empty. Imagining this as an archive page of posts, how would you write it to a centered 2-column grid when 2 items are empty? And when the 3rd post is added then the --grid-3 takes effect and the --grid-2 is ignored? Or would a completely different technique be used? It's 3AM and my brain is not fully operational ;-)

@Gearyco 2 ай бұрын

Different technique.

@Jim.Hummel 2 ай бұрын

@@Gearyco - OK, thanks! Hmmm, time for some thinking coffee (or bourbon)!!

@potti-webdesign7623 8 ай бұрын

Hi Kevin, thanks at first for this nice tutorial :) One thing i want to ask here instead of the IC for the algorythm which probably didn't let me finish this tutorial when the "has()" selector was the topic. I've noticed you can type "root" in Bricks custom CSS, i need to type %root%, without the "%" it does not apply any css code. And also you just type "--danger" which autofills the ACSS variables. Doesn't do it for me. Do these things may change the necessary code in the path where you use: .brxe-container:has(> figure) { border: 5px solid var (--danger); } I copied you setup to test the figure child elements and then tried to test the has() selector. This sadly does not work or changes anything. Just want to know wheter the above mentioned things could affect this for me and maybe other users that don't have the same setup. Thanks for reading! Btw: I realize how i was absolutely drowning when i first discovered you a year ago. Now its way easier to follow and i gained some abilites to recreate your page setup on the fly without even thinking to much. Big thanks for this

@Gearyco 8 ай бұрын

“Root” was the old method. %root% was a recent upgrade to this placeholder in bricks. -variable auto expanding to var(-variable) is an ACSS feature.

@potti-webdesign7623 8 ай бұрын

@@Gearyco Hmm, auto expanding variables is activated. It works within the builder for example for padding, but within the custom CSS field it does not work,

@Gearyco 8 ай бұрын

@@potti-webdesign7623 in custom CSS the trigger is the semicolon at the end of the statement

@Gearyco 8 ай бұрын

@@potti-webdesign7623 in custom CSS the trigger is the semicolon at the end of the statement

@Mherhenry 3 ай бұрын

Dear Kevin, i have a 1 question about this lesson. As i remember from Your last lessons PB101 , photos must be in the box or in div, not in container. If im right, then at this lesson why we are using photos inside the container? Thank You so much for this course, from tomorrow i start to learn your paid lessons. Love and Peace from Armenia Root : {

@Gearyco 3 ай бұрын

I’m not sure you’re remembering a previous lesson correctly

@MusicJunkieVideos 5 ай бұрын

Treading water here

@ZailCZ 10 ай бұрын

Is it possible to use :empty for templates with dynamic data? When I prepare template with several elements that should be filled with dynamic data from CF, but for some reason one of the pages will not have that data filled for some reason (no image used at the place, where at other pages is used), can I hide that image wrapper when no image is there from dynamic data?

@ZailCZ 10 ай бұрын

As I'm planning to create template for services and prepare all the elements that should be filled with dynamic data, but at certain service page not all elements can be used. So I could use :empty and "clean" that page of unused elements?

@Gearyco 10 ай бұрын

You would want to hide that with conditions, not CSS. You don’t want those dom elements rendered if you can avoid it.

@stripedgoat8470 10 ай бұрын

I’ve seen you writing css (scss) in wpcodebox, as well as writing css in the builder. My understanding is that you’re preferring to write css that isn’t globally going to be used, into the builder (so that it gets loaded only on that page). Correct? But the problem with writing css into the builder’s css area is that sometimes you forget about it after a few months, especially if it’s something that is scattered around both the parent and child element’s css area. I would prefer to have it all inside a global css file, but then i would end up loading all styling on all pages even for elements that don’t exist on a particular page…. If you understand me. How do you navigate through this whole thing? Thanks for your reply in advance!

@Gearyco 9 ай бұрын

I answered today in WDD Live toward the end

@stripedgoat8470 9 ай бұрын

@@Gearyco great, will check it ASAP! Thanks for the reply, and thanks for everything you do!!

@kristapsbrikmanis 7 ай бұрын

Can nth-of-type be used with query loop? I'm trying to add a different background color to every third element with the figure tag. I'm adding this code to the grid container: %root% figure:nth-of-type(3n+3){ background:var(--primary); } What am I missing? Does it not work because of the query loop and is it calculated as only one element? How can I achieve this?

@Gearyco 7 ай бұрын

Yes works with query loop. I’d need a link to check.

@kristapsbrikmanis 7 ай бұрын

@@Gearyco Thanks for your response! I asked a question in the ACSS/Frames circle community as well. As this site is still in dev, I would rather share the link in a closed community, not this public :)