Correct CSS Div > li > span

Asked

Viewed 554 times

1

There is a part of my code that I am not able to change the css.

<div class="AlterarCSS">

<ul>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
</ul>

</div>

I tried to change it like this:

.AlterarCSS > li > span{
    background: yellow; 
}

I appreciate help

css

  • in the div that contains the ul

4 answers

4


The symbol > in a CSS selector ensures that the next element will be a immediate son, and, in your case, the immediate child is the ul.

To get the expected result, use the following selector:

.AlterarCSS > ul > li > span {
    background: yellow; 
}
<div class="AlterarCSS">

<ul>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
</ul>

</div>

For more information about CSS selectors, use CSS reference guide

3

Selector son

A son selector targets an immediate child of an element. The child selector consists of one or more single selectors separated by a higher sign ">". The parent element is to the left of the ">" sign, and it is allowed to leave blank space between the combination element and the selectors.

The following rule applies to all elements strong children of a div member:

div > strong { color:#f00; }

Only Strong elements that are direct descendants of the element div shall be affected by this rule. If there is any other element between the div and the element strong in the document tree, the selector will not apply. In the following example, only "Text one" will be affected by the rule:

<div>
    <strong>Texto um</strong>
    <p><strong>Texto dois</strong></p>
</div>

See More about Selectors

So your code should look like this:

.AlterarCSS > ul > li > span{
    background: yellow; 
}
<div class="AlterarCSS">

<ul>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
 <li>Nome - <span>Endereço Site<span></li>
</ul>

</div>

2

Remove the ">" from the CSS so try:

.AlterarCSS li span{
    background: yellow; 
}

Or do it the way you define your children correctly:

.AlterarCSS > ul > li > span{
    background: yellow; 
}

1

Try it like this:

.AlterarCSS ul li span {
    background: yellow; 
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.