CSS media query for a specific ID

Question

I tried to use media query within CSS that would work only on web front page. ID of the front page is defined within its body as index. This front page uses basically two columns (.aside and .main) and I want to avoid it on the front page but still use it on others.

When I try this CSS without specifying the ID, the .aside column does leave (on all pages), but once I try to add the #index (to use this only on the front page) it stops working.

@media only screen and (min-width: 500px) {
    #index {
        .aside.col-lg-pull-9 {
            right: 100% !important;
        }
        .main.col-lg-push-3 {
            left: 0% !important;
        }
        .aside.col-lg-3 {
            width: 0% !important;
        }
        .main.col-lg-9 {
            width: 100% !important;
        }
    }
}

Answer 1

The ideal way to handle this problem is as Hidden Hobbes stated—by using a preprocessor such as SASS. SASS is transpiled to CSS, which is then loaded the browser. It eliminates repetitive CSS, which makes development faster, and code easier to understand.

Depending on what framework (if any) you're developing in, you should be able to find the appropriate SASS/SCSS module to use in your project. If you're currently not using a framework, I'm partial to suggesting HarpJS, which includes several preprocessing modules for CSS and HTML.

References:

• SASS: http://sass-lang.com
• HarpJS: http://harpjs.com

Answer 2

the suggestion to add #index was good, but I kept a mistake in the previous code (dot before aside and main), the code below works well and it allows me to conditionally format the web based on the fact which link is actually viewed.

  @media only screen and (min-width: 500px) {
   #index aside.col-lg-pull-9 {
    right: 100% !important;
   }
   #index main.col-lg-push-3 {
    left: 0% !important;
   }
   #index aside.col-lg-3 {
    width: 0% !important;
   }
   #index main.col-lg-9 {
    width: 100% !important;
   }
}