How to target specific tags in HTML to apply css to using Pseudo Classes

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, we're going to take Pseudo Classes to a next level. We're going to target this second P-tag in our testimonials. We're going to make it smaller, we're going to tab it in, and you'll notice, in our HTML we haven't applied a Class to it, because that's what we would have done up until now. We would have gone, "All right, P-tag, get a class," but look, they're just plain old P-tags, but somehow in our CSS, magically, we're being able to isolate this using a Pseudo Class. We do it with our testimonial, we do it with this good looking thing. Every third list item is read. Pseudo Classes, they are the place to be. It's where it's happening. Join me in this video, and you too can be cool with Pseudo Classes. 

So we learned the real basic Pseudo Class Hover in the last video, but there's lots of other cool things you can do with Pseudo Classes. And the w3schools version of explaining it all can be very dry, and that sometimes is really what I want, but sometimes it's good to go and check out something like CSS tricks. Chris Coyer is really good at just giving things a practical application, and sometimes it will say, "You have to do something, according to the manual," but then you're like, "Really?" and then you come in here, and sometimes Chris is like, "Yeah, that's what you're meant to do," but it's not what people do. Not what regular designers do, or developers. 

So anyway, this one's pretty good, css-tricks.com/pseudo-class-selectors. Just do a search on his site, it gives you more practical explanations. Now I'm going to go through them myself because there's lots in this, but just know that there's more that we can cover in this particular video. It's got a really common one. So we've done those ones, let's look at these ones. The position and numbering are really useful, because what I'd like to do for our testimonials is, this last thing here, this last P tag, I would like to make it smaller, and dented a little bit. Where's my mock-up? I want it-- oh, that's not, I didn't even do that in my mock-up, but I want the smaller push to the right, and maybe italicized, so we can target things like that using Pseudo selectors. So let's have a little look. 

So we're going to use this one called first child first, and then we'll look at last of type, maybe. So let's jump into our Visual Studio Code. So start working with these slightly more complicated Pseudo Classes. Let's look at the first child one because what I'd like to do is, I'd like to say, style the H1 inside of this Hero box. So what we can do is we can say, inside Hero box1, I'd like to do the, I'd like to style the first child. Remember, we talked about parents and children, kind of makes a little bit more sense now, right? So I want to find the first child, and now what you do with it is, up here, can you see?-- let's look at an earlier one. So when we want to find a P-tag inside of cards, we put a space. It's the same with these Pseudo Classes. I don't want to attach it straight to this, and do first child, because it's not what I want, what I want to do is find the first child inside of. 

So just having that space in here, like we've done earlier for earlier kind of Compound Classes, I want to find the first child inside of Hero box. I'd like to make the color of blue. It's weird, huh? Weird syntax. Don't worry, I find it weird too. So I found the first child inside of there, you could say, the last child, and it's going to look at Hero box and find the last thing in there, and the last thing in there is this button here, and it's applied the blue color to the text. So that's going to work for us. 

What we want to do is, not Hero box, we want to find our cards, here we are. And we're going to say, I would like, inside of tbox, I would like to find the last child, because it's the last thing in there, last child, that's what I want. Is that what I want? Some bit of syntax, less curly braces. And let's do Font size, just make sure it works. So Font size, I'm going to turn down to maybe 0.8 ems, no, rems. Let's save it, let's have a little look. Did that work? There you go. 

So I've set the last child of this box here to do this to it. What I could do as well is if there's more-- ours is quite simple boxes, you can do-- let's comment that out, so it's there, and we look at a slightly different way, because your box that-- your Div Tag might be more complicated than that. So there's other ones in here, let's have a little look. We'll do nth of type, or type, this is a good one. So child is just dealing with whoever's inside the parent, and of-type, let's say we want to find the last of type. And what kind of type? So we're going to say inside of the tbox, space, because I want it to be inside tbox, I want to find the last, not last child, we'll find the last of type. And what kind of type? I want it to be the P-tag. These two get joined. 

So the last kind of P-tag inside of tbox is going to do the same sort of thing. I'm going to do Font size of 0.8 rems. And we'll do a bit of Padding on the-- which side is that? That side is left. Just going to push it over a little bit. How far? I'm going to guess that for the moment. Let's have a little look, and our guy is there. So it is the last of the P type, we end up at the same place, but you can imagine, if you have lots of things afterwards, after this P-tag, maybe there's an image, our last child is not going to work, because that's the last child now. 

So you can be a little bit more specific with it. Now again, I'm not going to cover them all, because it will have a, I guess, their our own kind of place. Let's look at maybe just a few more, but what we might do is we might leave that because that's working. I'll leave that there, you can decide which one you want to use. I'm just going to close this down and create a new document. What did I do there? I just created like a throwaway document. 

So there's an Unordered list, which is a bullet pointed list, and there's 10 little items inside of it, and it looks like this. You can play along, you can create this if you want, and I'm going to do my styling up in the Head tag for the moment. So let's look at some other things. Let's say that I want to target the third guy down, just this fella. So what I can do is I can say, inside of the ul, put a space, because, something inside of it, I would like to target the nth child, and in the brackets you type the number you want. So I want to target the third child inside of this fella. I'm going to put in my curly braces, I'm going to say, make you a color of red. We've used too much blue. So let's give it a test in the browser, there you go. 

The cool thing about it is, if I start putting stuff in here, apples-- I'll speed this up. That will do, let's save it, let's have a look. So the orange is red but the thing about it is, if I move the order of this, I'll make the oranges the top, it doesn't really matter actually, you can see, banana has now become red. So it's a great way of targeting it, and you can kind of dump stuff on to the page, and it doesn't matter, the third person will become red. 

Now you can also do, instead of just the third child, you can actually say, I want the second, the letter N afterwards, it will do the second version of him, and just kind of repeat. Same, you could put in third. There's lots of other things you can do in terms of kind trying to find specific-- you know, you might be dumping loads of data on to a page, and you need to style every 20th row, but only if. And that's where you might jump into something like, Chris Coyer's kind of bit more, they all kind of dive into nice little examples, but I think that's it, gives you a good explanation. 

The big thing to know though is that, different from our Hover class, often there's a space in between, because I want to find the nth child inside of this thing, but if you want to get real specific, if I want to find the Li, I want to find the nth child only targeting the lis inside of the ul, this gets joined up. Weird, but true. All right, do we actually do ‘l’? We did, we tab those in, that's what I really wanted to do, and that’s why we created our testimonials, so we can learn a bit more about Pseudo classes. And if you're like, "Man, that seemed like a big-- what are we doing this for?," because later on in the course we're going to need to know a little bit more about Pseudo classes. So it's good kind of foundation for us, it will make it real easy later on. 

All right, that is it for this video. I will see you in the next one.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024