0

JSfiddle: https://jsfiddle.net/iqbal98/rxp0dxm9/

Issue: Select first instance of the class search-result-group-posts

In this case ul has many li or called .search-result-item too, but specifically on

li.search-result-item.search-result-group-posts

I want the first of this li's to have a different background-color and a margin-left

This is what I want: https://jsfiddle.net/iqbal98/rxp0dxm9/1/ (html inline css added)

PD:

  • look at /*DOES NOT WORK*/ comment section to quickly see the problem
  • I'm using Sass and the :first-child selector is used this way: &:first-child. I also tried in a separated way (without the "&")

li.search-result-group[data-search-group=posts]{
        border-bottom-width:0;
      }
      .search-result-group-posts:first-child{
        margin-left:10%;/*DOES NOT WORK*/
        background-color:red;/*DOES NOT WORK*/
      }
      li.search-result-item.search-result-group-posts{
        position:relative;
        border:1px solid brown;
        display:inline-block!important;
        width:29.478%;
        border-radius:4px;
        margin:0 5px;
        .search-result-post-up{
          font-size:16px!important;
          border-radius: 10px;
          padding:4px;
          .search-result-post-title{
            margin-left:3%;
            font-size:110%!important;
          }
          .search-result-post-content{
            white-space:normal!important;
            margin:.3% 2% .7% 2%;
            font-size: 70%!important;
            text-align:justify;
          }
        }
      }
<ul class="search-result-list" style="height: 755.383px;">
  <li class="search-result-group" data-search-group="posts">Posts<span class="fa fa-newspaper-o"></span></li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem Ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem Ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-item search-result-group-posts">
    <div class="search-result-post-up">
      <a href="#!">
        <span class="search-result-post-title">Lorem ipsum</span>
        <p class="search-result-post-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget egestas est, consequat consequat nibh.
        </p>
      </a>
    </div>
  </li>
  <li class="search-result-group" data-search-group="categories">Categories</li>
  <li class="search-result-item search-result-group-categories">category-1</li>
  <li class="search-result-item search-result-group-categoies">category-2</li>
  <li class="search-result-group" data-search-group="user-favorites">Favorites</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-1</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-2</li>
  <li class="search-result-item search-result-group-user-favorites">favorite-3</li>
  <li class="search-result-group" data-search-group="keywords">Keywords</li>
  <li class="search-result-item search-result-group-keywords">keyword-1</li>
  <li class="search-result-item search-result-group-keywords">keyword-2</li>
  <li class="search-result-item search-result-group-keywords">keyword-3</li>
  <li class="search-result-item search-result-group-keywords">keyword-4</li>
</ul>
1w3j
  • 566
  • 8
  • 24
  • One problem is that you're trying to use SCSS without specifying that in the Fiddle. – APAD1 Mar 21 '17 at 17:36
  • 1
    @kittykittybangbang's answer is why it isn't working. That element isn't the "first child" of it's parent - it's the first instance of that class. Those are 2 different things. – Michael Coker Mar 21 '17 at 17:40
  • using SCSS on jsfiddle just adds some styles to the result – 1w3j Mar 21 '17 at 17:40
  • @Michael Coker how can I select the first instance of a class? I tried both `first-of-type` and `first-child` – 1w3j Mar 21 '17 at 17:42
  • Here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild is selecting first instance of `p` (inside the `body`). Am I wrong? – 1w3j Mar 21 '17 at 17:44
  • 2
    @iqbal_cs you need to give it a class or find some sort of workaround, there isn't a `:first-of-class` selector yet in CSS. http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – Michael Coker Mar 21 '17 at 17:46
  • Please post your "*[mcve]*" code (including the relevant HTML) in your question, otherwise if, or when, JS Fiddle (or any other external site) fails this question will become useless to future visitors. – David Thomas Mar 21 '17 at 17:51