Can I reference a bootstrap css selector with its name?

Question

for example, a bootstrap table selector defination:

.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

now I want to use this style in my content, but the content is generated by a WYSIWYG editor, so <table>...</table> in it. I can`t specify selector in these content, what all I know this content within a div, like

<div id="editor_content">...</div>

so, can I define a selector like this grammar? let all <table> in the div show a bootstrap style.

now I just copy the same code into it.

#editor_content table{
 << reference .table-bordered >>
}

Thanks

Possible duplicate of [Can a CSS class inherit one or more other classes?](https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) — disinfor, Jun 17 '19 at 19:11
@JasonB If that, I must search the input string and insert css tag, is there a simple a better way? — Xu Wang, Jun 18 '19 at 09:42
@XuWang yeah, that duplicate question shows that you can't do what you're asking without using a preprocessor like LESS or SASS. As JasonB pointed out, you can use JS to target all tables in your `#editor_content` element and add the `.tabled-bordered` class to those elements - but you can't use just CSS unless you copy the bootstrap styles to your own class. — disinfor, Jun 18 '19 at 12:16

score 1 · Accepted Answer · answered Jun 19 '19 at 04:31

Here is a working example that adds some bootstrap classes to a table found within the #editor_content div.

$( '#editor_content table' ).addClass( 'table' ).addClass( 'table-hover' ).addClass( 'table-bordered' ).find( 'thead' ).addClass( 'thead-dark' );

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor_content">
  <p>Some stuff</p>
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>c</td>
        <td>d</td>
      </tr>
    </tbody>
  </table>
  <p>Some other stuff</p>
</div>

Can I reference a bootstrap css selector with its name?

1 Answers1