neca
neca

Reputation: 139

Can you increase specifity by nesting class inside of another class?

Would this

.class{
 .subclass{ }
}

be same as

.class{}
.subclass{}

are there any diffrences apart from visual ones?

Upvotes: 0

Views: 186

Answers (2)

Robert Wade
Robert Wade

Reputation: 5003

Nesting in SASS does exactly that. It increases specificity of the selector.

Play with this gist on SassMeister.

.class {
  .subclass {
    color: red;
  }
}

compiles to:

.class .subclass {
  color: red;
}

Upvotes: 3

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

It does increase specificity.

.class {
    .subclass{}
}

after being compiled into regular css is:

.class .subclass {
}

While your second example stays exactly the same after compiling.

Of course this only works if you are using SASS / LESS.

Upvotes: 1

Related Questions