CODEWITHSUNDEEP
htmlcsscss-selectors
Tsury
Tsury

Reputation: 739

Defining css for a specific element

I have this HTML:

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#top">
                <i class="fa fa-play-circle"></i>  !!!!!!!!!!!!
            </a>
        </div>
    </div>
</nav>

I'm trying to define a css that will only affect the <a> element with the '!' symbols. The CSS I'm trying is:

.navbar-custom.navbar-fixed-top.navbar-brand a { something }

This CSS won't affect this element and I have no idea why...

Upvotes: 0

Views: 63

Answers (1)

web-tiki
web-tiki

Reputation: 103830

You are forgetting the space before the last class selector, as .navbar-brand is a child of the element with the classes .navbar-custom and .navbar-fixed-top you need to insert a space before it.

The second issue is taht the .navbar-brand is the class of the <a> element so you need to do this :

.navbar-custom.navbar-fixed-top a.navbar-brand { something }

For more information about the descentdant selector (space) to select the child of an element please see MDN

Upvotes: 2

Related Questions