CSS Selectors

CSS Selectors

Hello and welcome once again.

In the previous lesson, we learned about three different ways of adding CSS and we also learned that the

external CSS method is a more scalable way of adding CSS.

So we’ll be using this external CSS method and we already have our external CSS document open and we

have linked this document to average.

You may find using the link tag and I’ve added some estimates called for demonstrating purpose.

Now when we are using the external CSS we need to select the element from the HTML document that we

want to style.

For instance, we selected the B element for paragraph and wherever properties we add inside the curly

brackets are automatically applied to the paragraphs in the HTML document.

And that’s how all the better graphs on the page have become red in color and 16 pixels in font size.

So this is what the external CSS index looks like.

We have a selector.

And then inside the curly brackets, we can add different properties and values so the speed here is the

selector for the paragraph text in the HTML document and therefore whatever properties we add inside

these curly brackets will apply to the paragraphs on the page now in this lesson.

I’m gonna go more in detail about selecting elements or these electors and talk about the different

types of selectors that we get and see assess.

Now the first one we have is the universal selector represented by Estrich which selects all the elements

on the HTML page.

CSS Selectors

Therefore whatever properties we add inside and applicable to all the elements.

And that’s why one has to be a little cautious by using the universal selector since it is applicable

to all the elements on the page.

So we can use it only for a property that we want to apply to all the elements on the page to demonstrate.

I’ll go to the CSS file and type streak for the universal selector and that curly brackets and then inside

I mentioned phone family and this one family is the property to specify the phone style and let’s type

Ariel for the ideal phone.

Now all the elements will have an idea as the phone style B paragraph heading etc..

Now for the phone family property, it’s recommended that you specify three or four different form styles

like I can add after this ideal comma sensitive comma the home which is also a good font style and the

reason for selecting multiple font sizes is that if the browser is not able to open this first font style

maybe because that browser doesn’t support that then it will try to load the second one and so on.

Therefore it’s a good idea to have three or four different font styles based on your preference to be

on the safe side here.

April is the first preference followed by sensitivity and HTML.

So this is the universal selector and let us now talk about another type called element type selector

using element type selector.

We simply mentioned the element that we want to styled like this B is the element selector for paragraph

and wherever style properties we provide inside the curly brackets will apply to all the B elements

on the page, in the same way, we can add other elements like I can add each one as a selector and then

add some properties now all the H1 elements will have these properties applied likewise you can add

other elements as a selector like this header div etc. and then add the properties to stand them.

So this is the element type selector.

Now suppose you have the same properties that you want to apply to different elements and you don’t

need to write separately as properties like this.

Each one has the same properties as the B selector.

So in this case there’s a shortcut.

Then instead of adding the properties again, I could have simply added the H1 next to the p selector

separated by a comma.

Now I can get rid of these lines from here because the properties will apply to both the H1 and paragraph.

Also, you can add more elements as well separated by comma now this element selector is quite general

as it stands all the instances of the element like the P element applies these properties to all the

B elements on the page.

Therefore in case you want to sell only some specific elements then the element type selector may not

be the choice nonetheless for selecting specific elements.

We have a couple of more elements selectors like this third one which is a descendant selector combinator.

So the descendant’s selector combinator lets you select more specific elements by combining elements.

For example if you want to select let’s say only the p elements that are inside the header then you

can type header space B.

So, in this case, it will first look at the header and then we’ll side all the p elements inside the header

which means these elements within the header tax as a result.

This time these properties are applied only to these paragraphs inside the header.

So this is why it’s called descending because the speed after header means the B elements which are

descending or the child elements of the header.

Now in the same way if I type header space div space B then it further narrows down to all the p elements

inside the div which is inside the header tag.

So there’s div here is not any div on a page but only the div which is inside the header.

So as a result of combining these three elements the CSR style properties will apply only to this bee

because this bee is inside the div which is further inside the header.

This is why it doesn’t select DSP because even though it is inside the div modest div is known inside

the header.

So by adding multiple descendants you can be more and more specific and you can also combine more elements

to get to the specific elements of your choice however this method is still not very specific.

Suppose that you want to select only the second bee element.

We cannot do this using descending combinator because both paragraphs have the same parent which is

the header and if I type header space be then it can still mean both the paragraphs cos they’re both

inside the header and we can narrow down any further here to select only the second paragraph.

Moreover, imagine if we had another header on the page with B elements in that case it would select those

paragraphs as well so this descending combinator clearly has some limits.

So as a workaround to get to an individual element of the choice we can use another method that involves

class and idea attributes and this method is a very commonly used method and super easy.

And for this matter, all we need to do is go to the element of the choice and then give it either a class

or idea attribute so let’s give this paragraph an idea of let’s say paragraph 2.

Just a random name I’m giving now I can simply use this idea name as a selector using hash symbol and

this has symbol means we are using an idea name and this is the idea name so this will automatically

apply the properties only to this paragraph because only this paragraph has this idea in the same way

I could have given this element a class attribute also.

So if it was a class name and this hash would invoke those hashes only for ideas and for class we rather

have dot so dot paragraph 2 now refers to this class name and will automatically apply these ISIS properties

to the second paragraph.

Now you might be wondering if both ideas and class are able to select a specific element and what’s

the difference between them.

Well there’s one important difference and it can help you decide whether you should use ideas or class

attribute and that difference is that ideas are unique but classes are not what this simply means is

that if you have given an idea to this paragraph then you cannot use the same idea name anywhere in

the document.

So suppose that you want to apply the same properties to another element let’s say this b element.

Well it’s not possible using the idea cos if you add the idea attribute and give the same name then

it won’t work.

You can attribute the same I.T. name in the same team and document you will have to give it another


On the contrary this is not the case with the class.

You can repeat the same class name and when you select the class name as a selector then it will apply

the properties to all the elements having that same class name.

So if you add the same class name to this paragraph as well then this paragraph will also have the same

properties applied and likewise if you add the same class name to this H1 one and this each one will

also, be styled the same way.

So the idea and class allow us to pick any particular element after this.

We have a few other selectors as well but these four types are very common and you will be able to manage

most of the time using only these selectors that we have just discussed but let me also explain these

other selectors as well and they are also pretty easy and let’s begin with the change selector combinator

it’s similar to the descendant’s elector combinator but this one selects only the direct child elements

and views the greater than symbol between the elements.

In this case so to demonstrate.

Let’s first show you again what will happen when I am head of space B as a descendant selector.

In this case, the properties will apply to all the B elements that are inside the header which are this

one this one and this one however if I had the greater than symbol in between then it now becomes a

child selector Combinator and this will apply to properties only to these two paragraphs because this

the third paragraph is not a direct child of the header.

It’s a direct child of this div element so you can use this option to apply CSA as properties only two

different child elements.

Next, we have the adjacent sibling selector and what it does is that instead of selecting the descendants

or the child elements it selects sibling elements and the sibling elements are basically all the elements

that have the same direct parent like this each one and two paragraphs is siblings because they all

have the same parent which is this header whereas this paragraph inside the death tax is not the sibling

of these because this one has div as the parent but this div element is also a sibling of the H1 and

Pete elements cause this one to also have the header as the parent.

CSS Selectors

So it’s a simple concept that all the elements have the same Derek parent are siblings of each other.

So using the adjacent sibling combinator we can choose to select the element which is an adjacent sibling.

And for this type we use the plus symbol and to demonstrate LME type H1 plus b as the selector and this

one will apply these properties to the direct siblings of B.

Only if it is right next to it like you can see here in this case the properties are applied only to

this paragraph which is next to this H1 and not to the other paragraph because it’s not next to it though

it’s a sibling likewise.

If I make this selection people as B instead then this time the properties will apply only to the paragraph

the element which is directly followed by a paragraph element which in this case is this paragraph as it

comes directly after a paragraph which is a sibling.

So there are two important conditions with this type.

First it has to be a sibling of a paragraph and second it has to be directly next to it.

So if I had let’s say any element in between like this span element then this time it will not look

because this paragraph is not next to it even though it’s a sibling in the same manner if it was H1

plus B and the span element was here then also it wouldn’t select either cause the sibling paragraph

is not next to the Hone, however, this is not the case with the next type which is general sibling Combinator

and this one is very much similar to the adjacent sibling combinator that we just saw.

The only difference being that this one selects all the general siblings but remember it’s still siblings

and also this one takes the till the signed between the elements.

So here if I make it each one to love B then this now becomes a general sibling selector and this time

it will select all the paragraphs which are a sibling of this each one even if they’re not directly next

to it.

So unlike the Addison siblings this one has only one condition that the elements should be a sibling.

Now the last one in the list is the attribute selector and this one selects an element having an attribute

that we can specify like this so we can type an element as a selector and then inside the square brackets

we can mention the attribute, for instance, let’s suppose we have given an attribute of Lang for language

to this paragraph.

Now I can select B and inside the square brackets I specify Lang and this will apply the properties

to this B having this attribute and in case any other element also has the Lang attribute then it will

also have the properties.

And one thing to keep in mind is that there’s no space between the element and the square bracket.

Otherwise it will become a descending combinator that takes space between the elements.

So no space between the element and the square bracket and you can be more specific as well by including

a value for this attribute.

So if I may get Lang is equal to E and then this time it will only select the B element having a Lang

attribute that even as the value.

So, in this case, it will again not select the second B because this one has Lang is equal to far so the

attribute the same but the value is not the same.

So this attribute selector is also useful and you can use it for any attribute.

Another possibility is to add only the attribute without the element.

In this case it’s gonna apply the properties to any element having this attribute.

Or we can be specific with the value so these are the different selector types that you can use in order

to select different specific elements on the page for styling these might look too many but they all

have very clear differences and are there to help us in selecting different elements that we need to

style before we finish.

Let’s have a short fun quiz to test our knowledge and here we have the first question.

So for the first question we have a piece of its dismal code and you have to select this paragraph.

And here are the options

and the right answer is B.

We can select this paragraph using the idea name and for an idea we use the hash symbol with the name.

Therefore the C option is definitely not appropriate whereas the first option will select all the B

elements hence B is the right answer let’s now move on to the second question and now we have to select

this b element.

And here are the options

and the right answer is B.

Cause if we use only the Lang attribute then it will select both the B elements moving on we have this

the third question and this time we have to select these two elements

so this one is simple and undoubtedly the C option is right because both the B elements have Lang attribute.

Next, we have to select this div element

and the right answer is D because all the options are true we can call this div only by its class name

and then headspace div will also select this div only because this one is inside the header and peoples

div is the adjacent sibling Combinator and this div is a sibling as well as next to the B element so

this also tells us that there can sometimes be multiple ways of selecting elements now time for the

last question.

It’s a bit tricky but I know you can do it

so the right answer is A.

In this case, this one is a child Combinator which means that it will select Derek type elements on the

the header which is these two that we need to select.

The second option is definitely not appropriate because it will select all the B elements inside the

the header which also includes the speakers.

This is also inside the header but these two paragraph elements are direct children of this header and

this third simply means all the B elements which we don’t want to select here.

So it is the right answer.

So I hope you have a clear understanding of these different selector types and once you start using

then they’ll be much clearer.

But I would recommend that you create an external file with some code and then create and join an external

Classes the file and try different selectors and properties.

It will be a fun and effective learning experience.

So keep learning and see you in the next lesson.

Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *