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>

Are you looking for `select.posts` instead of `.posts select` ? — HelmBurger, Apr 08 '17 at 18:56
may be a duplicate http://stackoverflow.com/questions/10036156/whats-the-difference-between-css-classes-foo-bar-without-space-and-foo-bar — repzero, Apr 08 '17 at 18:57

Asons · Accepted Answer · 2017-04-08T19:19:08.937

.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

Issue with setting a style

1 Answers1