CODEWITHSUNDEEP
htmlcssfont-awesome
Varun Verma
Varun Verma

Reputation: 724

How to override CSS using */all notation

I have the following CSS as part of a scrolling image plugin that I downloaded from the internet:

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

And I wanted to create another left floating Social Media bar. This media bar works on other pages that do not have the scrolling plugin mentioned above. So there is some overlap with the scrolling plugin and the CSS for the social media bar that is causing the social media bar to not show properly.

Here is the source code in JSFiddle for the Media Bar working fine:

https://jsfiddle.net/6bjbra49/


/*
    *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    */
    .media-bar {
    	position: fixed;
    	top: 50px;
    	left: -40px;
    }
    .social {
      width: 200px;
    }
    
    .social li a {
      display: block;
      height: 20px;
      width: 40px;
      background: #222;
      border-bottom: 1px solid #333;
      font: normal normal normal
      16px/20px 
      'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      transition: background .5s ease .300ms
    }
    
    .social li:first-child a:hover { background: #3B5998 }
    .social li:nth-child(2) a:hover { background: #bb0000 }
    .social li:nth-child(3) a:hover { background: #125688 }
    .social li:nth-child(4) a:hover { background: #f40083 }
    .social li:nth-child(5) a:hover { background: #cb2027 }
    .social li:nth-child(6) a:hover { background: #bb0000 }
    
    .social li:first-child a { border-radius: 0 5px 0 0 }
    .social li:last-child a { border-radius: 0 0 5px 0 }
        
    .social li a span {
      width: 100px;
      float: left;
      text-align: center;
      background: #222;
      color: #fff;
      margin: -25px 74px;
      padding: 8px;
      transform-origin: 0;
      visibility: hidden;
      opacity: 0;
      transform: rotateY(45deg);
      border-radius: 5px;
      transition: all .5s ease .300ms
    }
    
    .social li span:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: -20px;
      top: 7px;
      border-left: 10px solid transparent;
      border-right: 10px solid #222;
      border-bottom: 10px solid transparent;
      border-top: 10px solid transparent;
    }
    
    .social li a:hover span {
      visibility: visible;
      opacity: 1;
      transform: rotateY(0)
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
	<li>
		<a class="fa fa-facebook" href="#"><span>Facebook</span></a> 
	</li>
	<li>
		<a class="fa fa-yelp" href="#"><span>Yelp!</span></a> 
	</li>
	<li>
		<a class="fa fa-instagram" href="#"><span>Instagram</span></a> 
	</li>
	<li>
		<a class="fa fa-flickr" href="#"><span>Flickr</span></a> 
	</li>
	<li>
		<a class="fa fa-pinterest" href="#"><span>Pinterest</span></a> 
	</li>
  	<li>
		<a class="fa fa-youtube" href="#"><span>You Tube</span></a> 
	</li>
</ul>
</div>

If you uncomment out the first line in the CSS, you'll see the resulting code that doesn't work well:

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.media-bar {
	position: fixed;
	top: 50px;
	left: -40px;
}
.social {
  width: 200px;
}

.social li a {
  display: block;
  height: 20px;
  width: 40px;
  background: #222;
  border-bottom: 1px solid #333;
  font: normal normal normal
  16px/20px 
  'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms
}

.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }

.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
    
.social li a span {
  width: 100px;
  float: left;
  text-align: center;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
	<li>
		<a class="fa fa-facebook" href="#"><span>Facebook</span></a> 
	</li>
	<li>
		<a class="fa fa-yelp" href="#"><span>Yelp!</span></a> 
	</li>
	<li>
		<a class="fa fa-instagram" href="#"><span>Instagram</span></a> 
	</li>
	<li>
		<a class="fa fa-flickr" href="#"><span>Flickr</span></a> 
	</li>
	<li>
		<a class="fa fa-pinterest" href="#"><span>Pinterest</span></a> 
	</li>
  	<li>
		<a class="fa fa-youtube" href="#"><span>You Tube</span></a> 
	</li>
</ul>
</div>

How can I fix such that the media bar works fine even when the first CSS line (*, *:after, *:before) exists in the code.

Upvotes: 2

Views: 51

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Just change that one property to content-box. So the CSS.

.media-bar *{
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}

Will convert all the elements under element with the class media-bar into content-box

Refer here to learn more on box-sizing.

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.media-bar {
	position: fixed;
	top: 50px;
	left: -40px;
}
.social {
  width: 200px;
}

.social li a {
  display: block;
  height: 20px;
  width: 40px;
  background: #222;
  border-bottom: 1px solid #333;
  font: normal normal normal
  16px/20px 
  'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms
}

.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }

.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
    
.social li a span {
  width: 100px;
  float: left;
  text-align: center;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}

.media-bar *{
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
	<li>
		<a class="fa fa-facebook" href="#"><span>Facebook</span></a> 
	</li>
	<li>
		<a class="fa fa-yelp" href="#"><span>Yelp!</span></a> 
	</li>
	<li>
		<a class="fa fa-instagram" href="#"><span>Instagram</span></a> 
	</li>
	<li>
		<a class="fa fa-flickr" href="#"><span>Flickr</span></a> 
	</li>
	<li>
		<a class="fa fa-pinterest" href="#"><span>Pinterest</span></a> 
	</li>
  	<li>
		<a class="fa fa-youtube" href="#"><span>You Tube</span></a> 
	</li>
</ul>
</div>

Upvotes: 2

Related Questions