DEV Community

Pritom Acharya
Pritom Acharya

Posted on

Help

I am new on HTML and CSS. So there is something I do not understand properly.
For example, take this code-

    <li><a href="">Home</a></li>
    <li><a href="">Articles</a></li>
    <li><a href="">Images</a></li>
    <li><a href="">About</a></li>
Enter fullscreen mode Exit fullscreen mode

Now in the style attribute, suppose I am writing-
nav a{
color: black;
text-decoration: none;

    }
Enter fullscreen mode Exit fullscreen mode

and,

nav>a{
color: black;
text-decoration: none;

    }
Enter fullscreen mode Exit fullscreen mode

what is the difference between them? And how do I realize when to use whom? For example, I wanted to hover the anchor tags. So I had to do it like this-
nav a:hover{
color: blue;
}
why didn't we write it like 'nav>a' here?
Pardon me for this post has become so big and advance thank you.
Edit- I am trying to fix it through editing but the first code is not showing that I used a nav tag. Please pardon me for that.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
irrelevantspace profile image
Dalia

The > selector means something is a direct child of something else. So in the case of nav>a, it means the a element has to a direct child of nav, while nav a means a is inside nav but doesn't have to directly, it can be nested inside other elements, like a child of a child or so on.

In the case of the code sample you have, nav>a doesn't work because a is inside il, so it's not a direct child of nav.

I hope this helps.

Collapse
 
pritom627 profile image
Pritom Acharya

Thank you ma'am.