-1

In a CSS selector, I do not understand the meaning of a space between a layout element and an id (or class):
CSS 

aside#sidebar{
    float:right;
    width:30%;
    margin-top:10px;
    color:#ffffff;
}



aside #sidebar{
    float:right;
    width:30%;
    margin-top:10px;
    color:#ffffff;
}

HTML

<aside id="sidebar">
    <h3>What We Do</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>

Thanks

Improve this question
2
  • While this is quite certainly a duplicate question, you need to post your HTML in the question. Otherwise, if you have trouble understanding the concept despite the current answers, we cannot explain it better than how we currently have. Your verbal explanation of your HTML under my answer can mean several different structures, thus you should always post the actual code and refrain from verbal descriptions of code.
    – Roope
    Commented Aug 24, 2018 at 18:27
  • Now that I understood the concept thanks to your explanations, I see why you think it is a duplicate question. Before understanding the concept, it did not appear to me as a duplicate question, because "the space/no_space": - in my question was between a layout element and an id. - in the previous question was between two classes. I edited the question accordingly and included the HTML. I removed verbal description of the output.
    – user9643672
    Commented Aug 25, 2018 at 1:06

2 Answers 2

Reset to default
-1

Your selectors are completely different.

In CSS, a space between the the arguments indicates 'inside of', while no space indicates 'also'.

To give an example. 

div {
 padding: 1em; 
 border: solid 1px blue; 
} 


.container.foo:before {
   content: ".container AND .foo"; 
}

.container .foo:before {
   content: ".foo inside any .container"; 
}
<div class = "container foo"> 

  <div class = "middle foo"> 
  
     <div class = "inner foo"> 
     
     </div> 
  
  </div> 

</div>

Improve this answer
-1

When you put a whitespace it's a parent/child relation, without it, it's the element.

Here aside#sidebar works mean that your aside element have an id sidebar.

aside #sidebar is when an element with id sidebar is the child of an element aside.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.