CODEWITHSUNDEEP
htmlcss
user6035846
user6035846

Reputation:

CSS Selectors Confusion

I am trying to understand selectors if I had something like

#topbar .ink-navigation ul.black li a.logoPlaceholder

does it mean I can issue a 

<li class="logoPlaceholder">

or 

<a href="" class="logoPlaceholder">Test</a></li>

Upvotes: 0

Views: 83

Answers (2)

JF-Mechs
JF-Mechs

Reputation: 1081

There are lots of css selector tricks you can do, I started studying css selector in this CSS game

But let me answer what's that selector is calling ..

#topbar .ink-navigation ul.black li a.logoPlaceholder

so basically this select an a tag element that has a class of logoPlaceholder inside an li that is also inside in a ul tag with a class .black which is also inside in a element with a class .ink-navigation with a parent element that has an id topbar

Edit: Added a code to demonstrate what I mean:

<nav id="topbar">
    <div class="ink-navigation">
        <ul class="black">
            <li>
                //Selectors call this element.
                <a class="logoPlaceholder"></a>
            </li>
        </ul>
        <ul class="white">
            <li>
                //Selectors won't call this because li tag was not inside a ul with a class of black.
                <a class="logoPlaceholder"></a>
            </li>
        </ul>
    </div>
</nav>

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

The second one is correct.

a.logoPlaceholder

Means that the <a> tag has the class logoPlaceholder, like this:

`<a class="logoPlaceholder" href="#">Link text</a>`

In fact, it is also telling you that the basic HTML scaffolding looks something like this:

<tag id="topbar">
    <tag class="ink-navigation">
        <ul class="black">
            <li>
                <a href="#" class="logoPlaceholder">

The elements that are labelled tag are not specified, so impossible if they are DIVs or NAV or ASIDE or SECTION or ? (But, I would guess the first one is a NAV and the second is a DIV)

Upvotes: 0

Related Questions