How to reference another selector in css


Tags: css,twitter-bootstrap-3

Problem :

I'm using bootstrap in a new project of mine and when I create a table I need to type this code <table class="table table-responsive table-striped table-bordered table-hover">

I would like to just use <table class="table"> and add the rest automatically.

I was hoping this could be done with css like the following:

.table {
    add .table-responsive;
    add .table-striped;
    etc...
}

Is something like that possible, if not, what should you do to solve this?



Solution :

it is not possible in pure css. if you use some css templater language like Sass, you could use @extend for this purpose. however in fact it will just produce css with .table class and copy-pasted css rules of another classes.

--

with @torazaburo remark. actually it will produce

.another-class, .table { another-class-rules } 

rather than

.table { another-class-rules }

    CSS Howto..

    How to use css control to focus on div background when href link clicked

    How to divide 3 divs(CSS + MVC)

    How do you avoid class name collisions? [closed]

    How to add a delay between cycles of css animation [duplicate]

    How can I position two to always be side by side

    How can I rotate(or change) background image using CSS and Javascript

    How to set Highcharts data series in x-axis using crosshairs?

    How to get the CSS attributes from a control located by XPath using Selenium IDE

    HTML/CSS: How to move my navigation bar to the middle?

    How do I center a Bootstrap div with a 'spanX' class?

    How to adjust website according to screen resolution

    How to do img validation

    How can I programatically show/hide a button that is part of the body template in Meteor?

    How to increase the font size of one word only in the line?

    Hide/show block with CSS

    How to fill remaining height and width?

    How can you assign a class to an id in css or javascript?

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    how the rises up and down button is made?

    How to create a image frame by css?

    How to change the color of the text next to an input field in an HTML form?

    How to make the transitions in my css work

    How to pass a css % parameter in javascript/jquery

    How to change CSS in media tag within @media only tags with jquery?

    How to center my a div in a table using CSS?

    How can I get my coloured Bootstrap popover to render properly?

    How do I fit text into footer margins

    How to implement a navbar with HTML / CSS

    CSS how to auto adjust width img tag

    Bootstrap with custom css how to align text vertically?