CSS parent and child selector correct syntax

Question

I've been seeing CSS like this lately:

1.

.header {
    position: relative;
    max-height: 1000px;
    z-index: 1;

    .sidebar{
        padding: 25px 25px;
    }

    .menu{

        border-radius:0;
        min-height: 30px;
        height:100px;

        i{
            color:#CCC !important;
            width:40px;
        }
    }
}

I guess header is the parent class and sidebar and menu are child classes of header.

Is this valid CSS syntax or good practice?

Usually I would expect CSS like this:

2.

.header { ... }
.header .sidebar { ... }
.header .menu { ... }

or even

3.

.header { ... }
.header > .sidebar { ... }
.header > .menu { ... }

What is the difference between these 3 cases?

As Praveen mentioned; the example you're showing SASS, which when compiled into a CSS file would just output what you see in #2 or #3. — Robert
– Robert, Commented Nov 7, 2017 at 15:04
@user2456977 Explained the whole thing as an answer for you. Let me know if you understand and you have any questions in it. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Nov 7, 2017 at 15:06

Praveen Kumar Purushothaman · Accepted Answer · 2017-11-07 15:06:27Z

3

The first one looks like it's SCSS or LESS (or some other CSS Pre-Processor) and not CSS, which render as the #2. To give you an idea of the difference between using > and not is:

.header .sidebar { ... }
.header .menu { ... }

Selects .sidebar and .menu anywhere inside .header.

<div class="header">
  <div class="sidebar"></div>
  <div class="menu"></div>
</div>

<div class="header">
  <div class="wrap">
    <div class="sidebar"></div>
    <div class="menu"></div>
  </div>
</div>

The code works for both the cases above. While, if you use:

.header > .sidebar { ... }
.header > .menu { ... }

The above code will not the second one that's wrapped inside .wrap. The second code is a direct descendant or a direct child selector.

answered Nov 7, 2017 at 15:06

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai T · Accepted Answer · 2017-11-07 15:13:14Z

1

First structure is SCSS ( a css preprocessor ) . That's the difference between first and 2&3.

SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.

The difference between 2&3 is the use of > which means " direct child selector " . For example .header .sidebar will select all .sidebar that are inside .parent regardless if they are children or grandchildren etc.

 <parent>
   <child></child>
   <child>
      <grandchild></grandchild>
   </child>
 </parent>

So it will select child and grandchild and further down the tree.

Using > will only select the child not the grandchild

edited Nov 7, 2017 at 15:13

answered Nov 7, 2017 at 15:08

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

3 Comments

James Donnelly Over a year ago

How can you be so sure it's SCSS over any other CSS preprocessor?

Praveen Kumar Purushothaman Over a year ago

Also, SCSS is not a CSS extension, but it's a CSS Pre Processor.

Mihai T Over a year ago

saying it is SCSS is not wrong. I am not 100% sure. But it can be. Can you prove it's not ? SCSS it's the most used. It can be LESS. or others. That doesn't mean my assumption that is SCSS is incorrect. @PraveenKumar my bad, SASS is the extension

Collectives™ on Stack Overflow

CSS parent and child selector correct syntax

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related