CODEWITHSUNDEEP
htmlcss
TheRedosan
TheRedosan

Reputation: 79

How to make a style affect only the child labels?

I'm starting to work with CSS and I have some problem. Surely it is very simple but, as I say, I started recently.

I have a HTML like this:

    <header>
        <nav>
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

I want it to be as in this image:

enter image description here

My problem is with divs elements inside the nav. I don't know how to give a style only to those div without modifying the html. My idea was to apply the style only to the child tags of a nav tag, but I have been reading about selectors in w3school and I can't find one that works for me. Some ideas?

This is for now my style for the header, but obviously it applies the style to all the divs and I don't want that:

header {
    background-image: url("banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 170px;
    width: auto;
}

nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
}

div{
    display: inline;
}

Upvotes: 0

Views: 425

Answers (3)

Alex K
Alex K

Reputation: 7217

Use the direct child selector

nav > div {
   display: inline;
}

Upvotes: 2

Huso
Huso

Reputation: 1486

You can do multiple things to achieve what you want..

1. Assign a ID or class to the nav element

    <header>
        <nav id="menu">
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

CSS code:

nav#menu div {
    display: inline;
}

Or if you use a class (class="menu") the css will be nav.menu div

2. Use the > to assign the style only to divs inside the nav element

Just use the following CSS code which will assign the style only to childs of the navigation:

nav > div {
    display: inline;
}

Option 1 and 2 can be used together also, so for example nav#menu > div

Upvotes: 1

user4676340
user4676340

Reputation:

If you don't want to change your HTML, here is the selector for your divs : 

header > nav > div {
  color: red;
}
    <header>
        <nav>
            <div>Inicio</div>
            <div>Secciones</div>
            <div>Contacto</div>
        </nav>
    </header>

This selector means

the direct children of nav that are divs, from the direct children of header that are nav

Upvotes: 2

Related Questions