Search code examples
cssmedia-queries

Wrap media query in class

I was wondering if there as a reason why I couldn't wrap a media query I have for the home page with the .home{} class so that it only fires there.

So instead of 

@media (max-width:416px){
.home .et_pb_code_0 {
		border-right:0 !important;
	}
.home .et_pb_code_1 {
		border-right:0 !important;
	border-left:0 !important;
	}
	.home .et_pb_code_2 {
		border-left:0 !important;
	}
}

I would use:

.home {
@media (max-width:416px){
 .et_pb_code_0 {
		border-right:0 !important;
	}
 .et_pb_code_1 {
		border-right:0 !important;
	border-left:0 !important;
	}
 .et_pb_code_2 {
		border-left:0 !important;
	}
}

}

Thanks!

Solution

  • You can't do that, it's not the right syntax, may be you could use that with preprocesors like SASS and LESS, but not in pure CSS.