This is Sasha and welcome to another CSS training video where I share with you how to edit and modify your business website with CSS or if you’re looking to learn a little bit of CSS, here’s some insight for you. Now today, we’re going to talk a little bit more about descendant child selectors and attributes or adjacent selectors. It can get a bit confusing, and I’m going to share with you on the examples how to do this.
There’s only a couple of these things that I look at and the way that I work within the code. I’ll show you what I do and also some other things to pay attention to as maybe your system gets a little more complicated. Let’s look on the screen with some examples.
Here’s what I’ve done is I set up a few paragraph tags and a div tag right there. That’s highlighting a few paragraphs within that div, and then you have a few paragraphs outside of that and a few more paragraphs out there.
If you’re looking to target what’s inside the div, you could say, “Okay. Well, I’ll do the div, and then we’ll do the paragraphs that are inside of there, and you can see those are the top three right there that gets hit or targeted and the other ones are outside of it. Do not get focused because they’re not inside of the div.
Here’s what becomes interesting though is let’s say you have the span tag because it’s also targeted but let’s say you don’t want that span tag to be focused because this paragraph is a little different or unique. What you can do is only hit the child of that because right now it’s the descendant.
Otherwise, if you want to hit the span tag with the paragraph tag alone, you would do something like this. You do div span p. If you want all of them targeted, you would go ahead and do div p, okay? That’s the descendant. But what if you want the other two but not anything that’s different?
Well, what you would do is do a greater than sign, okay, and you can see that hits and targets those top 2 because otherwise then – you know, the other approach to writing this is you go ahead and focus it like this and then you would have to write span background none, okay?
That would be the other way to write it, but that’s two lines of code. You don’t want to do that. It’s more efficient and effective really to go ahead and write it like this, and you’re good to go. Otherwise, you know, if you write div p, you get all 3. If you want the top 2, you get – you go ahead and add the greater sign.
Here’s an interesting one. What if you want the paragraph tag immediately after the div? Well, what you could do is use the plus sign which means the next version right there, okay? That hits the plus sign right there, and it allows you to go right after that.
Another way to do this is let’s say you have the UL tag right there, okay? We have the UL tag, so basically anything right after that if we want the table like the table to hit right after that whichever the first table is, we’ll go ahead and hit that, and you can see, boom, right away, it gets transformed. I probably wouldn’t use this, but you can see how this works and benefits you to hit the one right after that.
Usually, for me, I would say the one that I use most often is this greater than sign. That one is a little bit more useful especially when you have things within a div, and then you’re trying to target like certain paragraphs. It’s only those particular paragraphs because otherwise you have the spans or other creative codes around it and you don’t want those things to be targeted. The greater than sign is very useful.
Now if you want to go ahead and select everything under but not in the div, you could use this til design which is that squiggly thing, and this excludes the div. Anything that’s not in the div, you can see then goes along with that rather than, you know, the plus sign would give you the one right after that but if you do the til design, it kind of goes ahead and gives you everything after that.
Those are the selectors and how you go about selecting things, I would say the one that you’ll probably use most often is simply descendants. It’s div then P. And then the next one, you’d probably use most frequently is simply div and then greater than sign because that hits those specific properties.
As for the other ones, I don’t use them as much, but no one understands they are there. There’s also a wildcard symbol and a wildcard selector, and probably the best way to explain that is if you want to go ahead and let’s say target anything with the P tag, right, and you want the background pink, but let’s just say, “Okay, you want every element, okay?” Let’s say you had in there also maybe this UL or bullets.
You had a lot of different types of code there. Let’s say you also had a table. Let me see if this will work. You’ll throw a table in there as well, and this is inside the div, okay? Typically, if you want everything pink, right, if I do the div background pink, you can see it creates kind of a block.
What I could do is, do kind of like a wildcard right here and now it only hits the elements itself, right? You can see how it’s hitting all the details in that div and creating a wildcard. That means everything, you know, rather than if I just did the whole div.
It’s a whole background that’s pink that’s like a block whereas if I go ahead and do the wildcard, it’s the elements themselves within that. I hope that makes sense. A little bit more confusing usually this is more used for other attributes or maybe like the body related selector or something like that.
I don’t use it as often or frequently because it’s scarce that I’m looking to make everything a particular color or everything a specific font, you know, or everything one way. Usually, it’s for the body when you define a thing, but again you do have that option to use those things.
People will usually use this for like the body for something or just like, you know, the background and they’ll make it white or whatever it is. In either case, use it less frequently I would think, at least me personally than the others but know and understand that that’s also there.
