• 0
Sign in to follow this  
Followers 0

CSS question


Question

Posted · Report post

A quick question. Both of the following extracts of code wotk. However the second does not validate in http://jigsaw.w3.org/css-validator/

 

#menu-trial-1 .current-menu-item a, #menu-trial-1 .sub-menu .current-menu-item a {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
 
 
Wont validate:
 
#menu-trial-1, #menu-trial-1 .sub-menu {
  .current-menu-item a {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  }
}
 
 
Can anyone tell me why? Thanks

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

Hi,

 

Thats because nesting class declarations are not valid CSS. It is something that is allowed because SASS, SCSS and LESS (which we use) allow nested classes which then expand to standard CSS when served to the browser upon compile.

 

See some of the examples on LESSCSS.org - http://lesscss.org/

 

Nesting classes are useful as you can group all CSS associated to one class in nesting classes, for example:

 

Instead of writing this which is valid.

 

.hello { background-color: pink; padding: 40px 60px; box-sizing: border-box; }

.hello h1 { color: white; }

.hello p { color: white; margin: 15px 0; }

 

You can nest them so its easier to understand that all that is associated to the .hello class.

 

.hello {
    background-color: pink;
    padding: 40px 60px;
    box-sizing: border-box;
    h1 {
        color: white;
    }
    p {
        color: white;
        margin: 15px 0;
    }
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny

 

Knew the nesting worked, just didnt realise it was a LESS thing and not CSS3, which was why I could not understand why it wouldnt validate

 

Very clear and concise explanation :)

 

Can you mark this as answered as I dont seem to be being offered the option?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0