Issue with setting a style

Question

I have a dropdown list using a <select> element. For where I place this dropdown list on the page, I only want that page's list affected by a style so I give a class of 'posts' on the select element.

In my style sheet, I have:

.posts select
{
  margin-left: 40px
} 

It does not work UNLESS I remove the .post. Why?

Here's the element:

<select class="form-control posts" (change)="reloadPosts({ userId: u.value })" #u>
       <option value="">Select a user...</option>
       <option *ngFor="#user of users" value="{{ user.id }}">
            {{ user.name }}
       </option>
   </select>

Answer 1

.posts select target a select being a child of an element having the class .posts

HTML Sample where .posts select work

div {
  background: lightblue;
}

.posts select {
  margin-left: 40px;
}

<div class="posts">
  <select>
    <option>Select a value</option>
  </select>
</div

---

In your case you should do like this, select.posts, which target a select having the class posts

Do note, there should be no space between select and .posts

HTML Sample where select.posts work

div {
  background: lightblue;
}

select.posts {
  margin-left: 40px;
}

<div>
  <select class="posts">
    <option>Select a value</option>
  </select>
</div