Today we going to learn how to style using 'child selectors'
A child selector is NOT when husband and wife wanna adopt a baby, then they have to select a child, NO! That's not what HTML child selector means.
A child in terms of HTML is a tag that is inside another tag. For example, whenever we make tags like the body, they have to be in between the html tags or whenever we have the style tags, they have to be within the head tags. Like this 👇
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
As you can see, the <head> </head> is the child of <html> </html>
So <html> </html> will be the parent since head is within the opening <html> and closing </html> tags
So also <body> </body> is also a child of <html> </html> since it's also within the opening <html> and closing </html> tags
<style type="text/css"> </style> is the child of head since style it's within the opening <head> and closing </head> tags
So you can see style is the child and head is the parent.
I know you now understand what I mean by child and parent.
Let me now show you how to style using child selector system, for example, you wanna style links but you only wanna style the ones inside paragraphs, we *can't* just go on and start making styles for links because it's going to apply to all of them. In other to apply the style to *ONLY* the ones in paragraphs, we need to do something special.
Let's create a new file and save it with childsel.html
Copy the code below and paste it in your empty anWriter editor 👇
_____start from doctype_____
<!doctype html>
<html>
<head>
<title>TopCRIX Studio</title>
<style type="text/css">
</style>
</head>
<body>
<a href="https://topcrix.com.ng" >TopCrix</a>
<p><a href="https://crixconsult.com.ng" >CrixConsult</a></p>
<h3><a href="https://funbase.com.ng" >FunBase NG</a></h3>
</body>
</html>
_____stop at html____
As you can see, we have three different links
TopCrix which is the first link is just a plain text
CrixConsult the second link is a paragraph text because it was enclosed with p tags
FunBase NG the third link is within the header h3 tags that makes it bigger than the first 2 links.
Right now they all look the same.
Now if we want to style ONLY the link that is inside the paragraph tags, so.. That means we basically wanna style CrixConsult.
If we want to do that, we can't use the previous link styling formula I taught you because it will style the three links we have on our webpage but what we need to is to say, since the link we want to style is inside the paragraph tag, we want to style the links within ONLY the paragraph tags and the formula for that is 👇
p greater than sign and add the a tag (A.K.A the anchor tag)
p > a
This means, you are telling your CSS to style all children a anchor tag with the parent of p paragraph tag or for better understanding, you're telling the CSS to style all link tags inside paragraphs.
We use the greater than sign > in between the child and parent because it means relationship.
Let's go on and apply some styles like this 👇
Check it out! Now you can see that our CSS went through and look for all the links that are inside the paragraph tags.
The first link is not inside the paragraph (Not styled)
the second link is inside the paragraph (Styled)
the third link is not inside the paragraph (Not styled)
That's how you can style not only link both basically anything you want, depending on what their parent is.
Another thing is, if the <head> </head> is the child of <html> </html> then
<style type="text/css"> </style> is the grandchild of <html> </html> and
<html> </html> is the grandparent of <style type="text/css"> </style>
Yeah! That's how it works.
