How to stop some css from getting applied to all
  • tag

  • Tags: html,css,twitter-bootstrap

    Problem :

    In my css file I have applied before to my <li> element as:

    li:before {
     content: "";
     border-color: transparent #111;
     border-style: solid;
     border-width: 0.35em 0 0.35em 0.45em;
     display: block;
     font-size: 25px;
     margin-left: 65px;
     width: 0;
     left: -1em;
     top: 0.8em;
     position: relative;

    The problem is that once its included in my css file, my navigation-tab also includes this symbol which is something like:

    <ul class="nav nav-tabs">
       <li class="active"><a href="#t1" data-toggle="tab" >ABCD</a></li>
       <li><a href="#t2" data-toggle="tab">XYZ</a></li>

    How to tackle this ?

    Solution :

    You can override them like this:

    .nav li:before {
       display: none;

      CSS Howto..

      how to highlight specific control with css [duplicate]

      How to adjust the position a table to the bottom inside a DIV?

      How to reference nested classes with css?

      How to Extend Wrapped Elements to the Full Browser Width Using CSS?

      How do you create different CSS for dynamically generated elements?

      Show Item when Hover Over Parent

      CSS: How the backgrounds can extend the border and overlap?

      How to get CSS file to affect only a section of HTML

      How to set the css style display property in json success function

      How to put a space between the hover effect in this situation css html php?

      How to override group of css class?

      How can I make an only active on mobile devices?

      How to use externel CSS and (static) images in Go, Google App Engine

      How can I tell a scrollbar to always start at the bottom with CSS?

      css - how to setup image editing page

      How to stop breaking tables border when page is spliting?

      CSS - How to view computed font size?

      How do you create a link out of circular text with JavaScript and CSS?

      How to create this CSS border

      CSS: how to create a fixed top header with a fixed width

      How to wrap table cell at a maximum width in full width table

      How to select 3rd 'a' tag in a list for RSpec test?

      CSS/HTML how not to overlap fixed header

      how to change text color hover

      How do I disable position:fixed in web pages?

      How do I override a (css) metaclass property using a GreaseMonkey script?

      How to ensure each DIV appears on it's own without overlapping

      How to visually indicate current page in ASP.NET MVC?

      how to except all elements css inside div with class?

      How can I create a horizontal selector in a form with only html and css?