CODEWITHSUNDEEP
csssassmedia-queries
user31782
user31782

Reputation: 7589

Why does child selector > not work with media queries in sass?

Suppose in a situation I need child selector in css so I'd do with scss it as: 

#bslider {
     > img {
           display: block;
        }
     > #slide {
        .carousel-inner {
            perspective: 1000;
        }

    }
}

So > child selecter works good in scss. But now consider if I need media query too so I'd do it as: 

#bslider {
     > img {
           display: block;
        }
     > @media only screen {
        .carousel-inner {
            perspective: 1000;
        }

    }
}

But it gives error because of media query. Why can't I use > before @media rule?

As suggested that I should use > before id, class or tag used as selector. But I'd have to add it to all selectors is their any way to acheive this: 

#bslider {

    > img {
      display: block;
    }
      @media only screen > {
         .carousel-inner {
            perspective: 1000;
        }
        .img {
          display: inline;
        }

        .img2 {
          display: inline-block;
        }


    }
}

Upvotes: 0

Views: 631

Answers (1)

mXX
mXX

Reputation: 3625

#bslider {
     > img {
       display: block;
     }
     @media only screen {
        > .carousel-inner {
            perspective: 1000;
        }
    }
}

The reason why you can't use > before media is that > is part of a selector, while media isn't a selector but a condition for which styles to show depending on the format/resolution etc

Edit:

You could wrap your media query with an other selector, just don't forget to add it in your html. 

  #bslider {
     > img {
       display: block;
     }
     > .myContainer{
         @media only screen {
            .carousel-inner {
                perspective: 1000;
            }
         }
      }
   }

Upvotes: 4

Related Questions