CODEWITHSUNDEEP
css
user1532669
user1532669

Reputation: 2378

Setting background colour of nested list elements

Is it possible to set the background of all the "sale" elements? I've managed to set the "SALE" anchor tag background, like so:

#navigation li:last-child a {
    border-right: none;
    background: red;
}

I need to set the background for all the other "SALE" li elements.

How can I set the background for these elements with CSS? I'm thinking I might need to use JQuery, a CSS would be preferable though.

<div id="navigation" class="cf">
<div id="hamburger_wrap">
    <a href="#" id="hamburger">Main Menu</a>
</div>
<ul style="display: -webkit-flex;">
    <li class="active">
        <a title="Home" href="/" class="active ">
          <b class="ico-home">Home</b>
        </a>
    </li>
    <li>
        <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a>
        <ul class="dropdown" style="display: none;">
            <li>
                <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a>
            </li>
            <li>
                <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a>
            </li>
            <li>
                <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a>
            </li>

        </ul>
    </li>
    <li>
        <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a>
        <ul class="dropdown" style="display: -webkit-flex;">
            <li>
                <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a>
            </li>
            <li>
                <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a>
            </li>
            <li>
                <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 712

Answers (5)

vals
vals

Reputation: 64164

Your selector is

#navigation > ul > li:last-child a

demo:

#navigation > ul > li:last-child a {
  background-color: lightgreen;
}
<div id="navigation" class="cf">
<div id="hamburger_wrap">
    <a href="#" id="hamburger">Main Menu</a>
</div>
<ul>
    <li class="active">
        <a title="Home" href="/" class="active ">
          <b class="ico-home">Home</b>
        </a>
    </li>
    <li>
        <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a>
        <ul class="dropdown" style="display: none;">
            <li>
                <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a>
            </li>
            <li>
                <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a>
            </li>
            <li>
                <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a>
            </li>

        </ul>
    </li>
    <li>
        <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a>
        <ul class="dropdown">
            <li>
                <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a>
            </li>
            <li>
                <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a>
            </li>
            <li>
                <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 1

chazsolo
chazsolo

Reputation: 8439

I'd recommend setting a class, sale, on the elements you want to style.

a.sale {
  background: red;
}

However, if you can't set a class for whatever reason, you can use attribute selectors: 

// SALE is at the beginning of the title
a[title^="SALE"] {
  background: red;
}

// SALE is found anywhere in the title
a[title*="SALE"] { 
  background: red;
}

// SALE is found anywhere in the title as a white-space-surrounded word
a[title~="SALE"] {
  background: red;
}

Upvotes: 1

Alejandro Garrido
Alejandro Garrido

Reputation: 519

I think this codepen can help you!

<ul>
  <li title="sale asd">ONE</li>
  <li title="sale erw">TWO</li>
  <li title="no">THREE</li>      
</ul>


/**CSS**/
li[title~="sale"]{color:red;}

Upvotes: 0

Himanshu Arora
Himanshu Arora

Reputation: 2568

just add a class to the elements that you want to set the background for. If you just want a section of text to have the background, just wrap it with a span and set a class on it that has the desired background color.

Upvotes: 0

Gerard
Gerard

Reputation: 15786

You can use the following to cover elements with title="SALE", title="summer SALE" and title="SALE winter".

a[title~="SALE"] {
  background-color: blue;
}

Or assign a class to the 'SALE' elements.

Upvotes: 0

Related Questions