correct CSS Div li span

0

There is a part in 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; 
}

Thank you for your help

    
asked by anonymous 10.11.2017 / 12:57

4 answers

4

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

To obtain 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 on CSS selectors, use the CSS reference guide

    
10.11.2017 / 13:01
3

Child Selector

A child selector targets an immediate child of an element. The child selector consists of one or more simple selectors separated by a greater ">" 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 strong elements that are children of a div element:

div > strong { color:#f00; }

Only strong elements that are direct descendants of the div element will be affected by this rule. If there is any other element between the div element and the strong element in the document tree, the selector does 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>
    
10.11.2017 / 13:03
1

Remove the ">" of CSS try this:

.AlterarCSS li span{
    background: yellow; 
}

Or do this in a way that sets the children up correctly:

.AlterarCSS > ul > li > span{
    background: yellow; 
}
    
10.11.2017 / 13:03
0

Try this:

.AlterarCSS ul li span {
    background: yellow; 
}
    
10.11.2017 / 13:04