Nested CSS Rules

Nesting CSS classes

Not possible with vanilla CSS. However you can use something like:

• Sass

Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.

Or

• Less

Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.

Example:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

CSS Style Nesting - Proper Form?

If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.

There is no correct number of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2 means a selector2 at any level inside a selector1, and you can tune that for whatever behavior you need.

In your example, you should list .mainbody #container #header #toprightsearch .searchbox if what you mean is for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxes that exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.

Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.

CSS not using nested className rules

The problem is this rule:

& .collapsed {

It makes the output:

.error-notification .accordion-container .collapsed

While what you want is:

.error-notification .accordion-container.collapsed

You can achieve this result by removing the space:

&.collapsed {

You can check this here: https://www.sassmeister.com/gist/a41313db236a8e7edbb9e9748117e61b

How to correctly apply a css rule to a nested element

CSS works by applying style properties to a selector. In your case the selector is either the ul, or li elements. Think of the ul as a box, and the li elements as boxes inside the ul box. If you style the ul element, only properties which can be inherited will trickle down to the child elements, in this case the li elements. Here is a terrible list of CSS classes, see the "inherit" column.

To answer your question, the text-align property is inherited, so if you apply that to the ul all of the child elements will inherit that property. This would be the best way to do it since you only have to specify the property once on the parent container.

Beyond that explanation, it sounds like you are trying to remove the spacing from the left of the unordered list. This is how that is done, and an explanation:

• 'ul' elements by default have a padding left, but if you remove the padding, the bullets then overflow the container.
• So what we need is to remove the padding, and to set the list-style property to inside

body {
  background: #fefefe;
  padding: 30px;
}

ul {
  background: #efefef;
  padding: 0;
  list-style: inside;
}

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Specificity of Nested CSS Selectors

So it feels like it should show as orange, not blue.

Any idea why it doesn't?

Your ul is orange. But your li is colored blue independently of the color of its parent because you have explicitly targeted it and applied a color to it. It will not inherit its parent's color if you override the implicit color: inherit.

why can't I have a space between the .one and the .two in the .one.two selector?

Because that's a completely different selector. .one .two matches a .two inside a .one. .one.two (with no space) matches an element that is both .one and .two.

<div class="one">
  <div class="two"></div> /* matched by .one .two */
</div>

<div class="one two"></div> /* matched by .one.two */

Nesting @media rules in element

I think that it depends on the amount of the code you are going to write. It works without any problem, but hundreds of different media queries nested in each class could be hard to maintain. In my opinion a good practice, especially for big projects, would be to use separate files for each media query threshold, in order to keep your CSS organized as much as possible.
For example:

style.less

.class1 {
  width: 100%;
}

.class2 {
  color: #000;
}

@media screen and (min-width: 740px) { 
  @import "min740.less";
}

min740.less

.class1 {
  width: 50%;
}

.class2 {
  color: #faa;
}

If you are going to write separate components, like buttons or typographies, you can keep all the related media queries in the same file, in order to have a completely separate CSS module (your 2nd example basically).

In terms of speed and performances, obviously is always recommended to use compiled LESS in production, but considering your examples, the single media query selector would be more efficient, since in the "example1 way" the media query selector will be replicated multiple times:

.class1 {
  width: 100%;
}
@media screen and (min-width: 740px) {
  .class1 {
    width: 50%;
  }
}
.class2 {
  width: 100%;
}
@media screen and (min-width: 740px) {
  .class2 {
    width: 50%;
  }
}

---

Related Topics