Whenever I want to ensure that a class is only used on specific elements, I usually prefix it with the element name. For example, using div.className limits the className styling to just div elements. However, when I tried the same approach with a section tag, the styles were ignored. Is it not possible to restrict styles to section tags in the same way?
LESS
section.about {
&__points {
padding-bottom: 150px;
li {
padding: 10px 6% 10px 10px;
box-sizing: border-box;
width: 46%;
margin-right: 1%;
text-align: right;
list-style-type: none;
display: inline-block;
float: left;
position: relative;
margin: 10px 0;
margin-right: 1%;
h2 {
color: #fff;
text-transform: uppercase;
margin: 15px 0px;
}
...
}
}
...
}
HTML
<div class="main-wrap">
<section class="about">
<h1>About <span>Us</span></h1>
<p>Who are we at Mobile Paint Solutions, and what do we provide.</p>
...
</section>
</div>
Output CSS:
header #hdr-nav nav a:before,
...
body.nav-open #side-menu-icon:hover .bars:before{
top:0
}