CODEWITHSUNDEEP
htmlcssclass
bonny
bonny

Reputation: 3245

How to set CSS rule for a DIV in a LI of class UL?

I have a list of results from a query. That list will be displayed like that:

<ul class="result">
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>

Now I would like to add something like a layer like li:before or a DIV into li.

So I thought it would possible to do it like that:

<ul class="result">
    <li><div id="a"></div></li>
    <li><div id="a"></div></li>
    <li><div id="a"></div></li>
    ...
</ul>

The problem is that I can not set any CSS rule for this?

I tried:

.wrapper #header #navline #searchbar .dropdown .result li#a{
    background-color: #fff;
    height: 10px;
    width: 15px;
}

as well as 

.wrapper #header #navline #searchbar .dropdown .result li #a{...}

and just 

.wrapper #header #navline #searchbar .dropdown .result #a{...}

but nothing worked. Is there a mistake in my thoughts or is it not possible to add a DIV into li's?

Upvotes: 3

Views: 38537

Answers (5)

enhzflep
enhzflep

Reputation: 13099

You haven't given all of the html that encloses the above, so this may need further refinement for your requirements.

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.result li div#a{ color: red; }
        ul.result li div#b{ color: green; }
        ul.result li div#c{ color: blue; }
    </style>
</head>
<body>
    <ul class="result">
        <li><div id="a">This is red</div></li>
        <li><div id="b">This is green</div></li>
        <li><div id="c">This is blue</div></li>
    </ul>
</body>
</html>

Upvotes: 1

Jakub Kotrs
Jakub Kotrs

Reputation: 6244

A) Use unique IDs for you elements

B) Your CSS selectors are way too complicated

C) It should be .result li #a because .result li#a would mean thats the lis have the ID

D) When you use classes for the div such as:

<ul class="result">
    <li><div class="aDiv"></div></li>
    <li><div class="aDiv"></div></li>
    <li><div class="aDiv"></div></li>
    <li><div class="aDiv"></div></li>
</ul>

your selector should look like this

.result li .aDiv {
    /* CSS styles */
}

or, if necessary (you only want to tagret <ul class="result"> inside a specific element#someId), you can use a little bit more complicated selector:

#someId .result li .aDiv {
    /* CSS styles */
}

however, chaining ID selectors is redundant:

#someId #someOtherId #finallyThere .result li .aDiv {
    /* CSS styles */
}

because, as mentioned before, IDs are unique

Upvotes: 10

BenM
BenM

Reputation: 53228

Update your markup as follows (because IDs should be unique, you can use classnames instead):

<ul class="result">
    <li><div class="a"></div></li>
    <li><div class="a"></div></li>
    <li><div class="a"></div></li>
    ...
</ul>

Your CSS selector should then look like this:

.wrapper #header #navline #searchbar .dropdown .result li .a {

}

Upvotes: 3

Srdjan Dejanovic
Srdjan Dejanovic

Reputation: 1409

You can not have the same id for every div. So, you have to add class.

Upvotes: 0

DiederikEEn
DiederikEEn

Reputation: 743

instead of: <li><div id="a"></div></li> use <li><div class="a"></div></li> and then you only thing you should do is: .result li{style this thing}

Upvotes: 1

Related Questions