Sass: Direct Descendent Rule

SASS: Direct Descendent rule?

You should just be able to

body
  >div
    property:value

You may have to escape the > with a backslash \.

Select only direct children from element with Sass

Try this:

    ...
    & > div {width: 33%;}

    div {
      float: left;
      height: 4.1rem;
      line-height: 4.1rem;
      color: #fff;
      ...

Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).

Please edit your question and better explain what exactly you want to achieve.

Sass and combined child selector

Without the combined child selector you would probably do something similar to this:

foo {
  bar {
    baz {
      color: red;
    }
  }
}

If you want to reproduce the same syntax with >, you could to this:

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

This compiles to this:

foo > bar > baz {
  color: red;
}

---

Or in sass:

foo
  > bar
    > baz
      color: red

Make all rules in a CSS file apply only to descendants of id

I use Less, a CSS pre-processor to help with such things. I also use an a piece of software called Crunch. It can, however, be downloaded from here.

To give you an idea how it works, let's take your example.

Under less (and before compiling)

#thisOne {
    p {
        color:red;
    }
}

You can then add to the rule as you need. ie:

#thisOne {
    width:300px;
    margin-left:50px;
    h1 {
        font-weight:lighter;
        color:blue;
    }
    p {
        color:red;
    }
}

You can do a lot more than this. Check it out. I've become a convert.

Select all direct descendant dom elements regardless of type

I assume you mean the child selector. It's >, not <.

.parent > *

That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)

Best practice/performance between descendent and direct descendent selectors

Don't think about CSS performance. It's almost certainly a premature optimisation. If it's not premature now (i.e: not really a meaningful performance consideration), it will be in the near future (i.e: will be optimised well enough by browsers covering the vast majority of your target demographic).

The difference between a b and a > b is the level of "specificity" how deeply the selector engine must search to match b starting from a. While this might have an effect on performance (for large counts of elements matching a b), the a > b case might mean you'll lose flexibility in design.

In this case, if you attempted to 'optimise' performance by changing all cases of a b to a > b, you'd lose the ability to easily add more layers of DOM elements between a and b in your design without changing your CSS a lot. Leaving it less specific allows you to design in terms of 'behaviours'.

Also, while a > b (theoretically) does less work than a b, in most cases judicious use of classes on both levels will be equivalent (i.e: a.x b.y).

edit: Incorrect use of term specificity css-wise, and potentially incorrect algorithmicly. Better to state in terms of matching.

How to add some style only for main parrent in SASS

I believe your use of the nested selector is wrong, it must be throwing errors from Sass.
You have used the direct descendent selector > after the alias for the containing selector in this case the ul, so your compiled selector would look like ul > which is invalid.

The selector should follow the pattern parent > child. You may be attempting ul > ul but the nested ul is not a direct descendent of the main ul rather it is a child of li.

Your amended code:

ul {
   border-top: 2px solid #aaa;

   & > li > & {
     border-bottom: 1px solid #ccc;
   }
}

But note this rule will also apply in the following situation too, so you should probably go for a class on the nested ul.

HTML

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul> // w style: border-bottom: 2px solid #aaa;
      <li>
        <ul> // Another list
          <li></li>
          <li></li>
        </ul>
      <li>
    </ul>
  </li>
</ul>

So this would be better

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul class='sub-list'> // w style: border-bottom: 2px solid #aaa;
      <li>
      <li>
    </ul>
  </li>
</ul>

with the following css/scss

ul {
  border-top: 2px solid #aaa;
}

.sub-list { /* Will inherit the above if used on a ul */
   border-bottom: 1px solid #ccc;
}

Selector for not immediate child element

You could use the following selector:

.main > * .text

Which will select all .text elements that are descendants of .main, but not immediate children.

---

Related Topics