How to grouply select multi elements CSS?

Question

I use bootstrap. Table td is padding with 8px by bootstrap. But I just need 2px padding, So I use this style sheets to make the layout.

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 2px;
}

I want to know how can I select the td more easily? I'm more curiously about this way one layer a step.

.table > (thead, tbody, tfoot) > (td , th)

Or this: Can the * match many layers?

.table > * > td

Here is the snippet, any help will be appreciated. Thanks in advance!

table, td {
  border: 1px solid;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <head>
    <style>
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
      padding: 1px;
    }
    </style>
  </head>
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

@kukkuz It not works. You can check it in the snippet of my question. — LF00, Dec 06 '16 at 08:54
I tested @kukkuz's suggestion with your snippet and it sure as hell works. — BoltClock, Dec 07 '16 at 03:25
@BoltClock I just use .table > * > tr > td, .table > * > tr > th to replace my stylesheet, the td padding is also 8px. It need to add !important to make it works. In the question, there neednot the !important. — LF00, Dec 07 '16 at 04:21

Ilya Streltsyn · Accepted Answer · 2016-12-06T09:57:39.997

3

In CSS Selectors 4, there is a functional pseudo-class :matches, that allows for such grouping:

.table > *:matches(thead, tbody, tfoot) > tr > *:matches(th, td) { ... }

Unfortunately, it works currently only in Safari (Chrome and Firefox also have experimental support for its old form as :-webkit-any() and :-moz-any(), but it's not very helpful).

A single universal selector * can't match many levels. It's meaning is "any single element". But you can match two levels of any elements by * > *.

I'd suggest to use a hack for increasing specificity like this:

.table > * > tr > *:not(#any-fictional-id) {
   padding: 1px;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- whatever... -->
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>

:not() selector has the specificity of its argument, in this case, the specificity of ID, that is definitely higher than specificity of any classes. But you still can override it with !important if necessary. You can specify any fictional ID that doesn't actually exist in the markup.

edited Dec 06 '16 at 09:57

answered Dec 06 '16 at 09:41

Ilya Streltsyn

13,076
2
37
57

I know nothing about #any-existing-id here. – LF00 Dec 06 '16 at 09:46
1

I edited my answer. The point is to specify the _fictional_ ID, that doesn't actually match anything (and therefore can be matched by `:not()`). – Ilya Streltsyn Dec 06 '16 at 09:47
1

If the selector's specificity needs only to be at parity with that of `.table > (type selector) > tr > (type selector)`, I recommend `.table > * > tr > *:not(_):not(_)` instead of an ID selector. See http://stackoverflow.com/questions/28299817/can-type-selectors-be-repeated-to-increase-specificity/28300471#28300471 – BoltClock Dec 07 '16 at 03:29
@BoltClock, I agree (although `_` as tag name looks a bit unusual). I'd even write it as `.table > :not(_) > tr > :not(_)` for readability in this case (or even as `.table > :not(span) > tr > :not(span)`, given that the structure of table descendants is quite predictable and they never are `span`s). But I assumed (possibly wrongly) that some Bootstrap classes were also to be overridden. – Ilya Streltsyn Dec 07 '16 at 08:22
Oh yeah, having one :not() per compound selector looks more readable. The type selector can be anything that makes sense for the use case, of course. – BoltClock Dec 07 '16 at 09:13

jafarbtech · Answer 2 · 2016-12-06T09:33:59.950

Use selector as table.table > * > tr > th, table.table > * > tr > td to set the padding value

table, td {
  border: 1px solid;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <head>
    <style>
    .table > * > tr > th, .table > * > tr > td {
      padding: 1px !important;
    }
    </style>
  </head>
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

This also overlay be the bootstrap, you can check it. The padding is 8px of bootstrap. — LF00, Dec 06 '16 at 09:05

score 1 · Answer 3 · edited Dec 06 '16 at 14:45

1

Generally, this is why CSS pre-processors like SCSS or LESS are used. To more functionally represent your code in a better syntactic way i.e to do more and to write less.

The SCSS version of what you want would be:

table {
  thead,  tbody, tfoot {
    tr {
      td, th {
        padding: 2px;
      }
    }
  }
}

edited Dec 06 '16 at 14:45

LF00

27,015
29
156
295

answered Dec 06 '16 at 10:58

nashcheez

5,067
1
27
53

score 0 · Answer 4 · edited Dec 06 '16 at 09:23

0

Try :

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th{
    border-top: 1px solid #e6e6e6
}

edited Dec 06 '16 at 09:23

Jishnu V S

8,164
7
27
57

answered Dec 06 '16 at 08:45

Nour Alhammady

9
4

1

Why should the OP "try" this? A **good answer** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – B001ᛦ Dec 06 '16 at 08:49
1

Thanks for your explanation bro, – Nour Alhammady Dec 06 '16 at 08:53
This way can make select td or more selector easly by css – Nour Alhammady Dec 06 '16 at 08:54
@bub: Good Lord, more than *half* of these answers are "try this" answers. Unbelievable. – BoltClock Dec 07 '16 at 03:24
@BoltClock sadly yes, but I had to review this answer – B001ᛦ Dec 07 '16 at 08:40
1

@bub: I appreciate you taking the time to leave a context-appropriate comment instead of just choosing "This does not provide an answer to the question." and moving on. – BoltClock Dec 07 '16 at 09:14

score 0 · Answer 5 · answered Dec 06 '16 at 08:52

0

Try this

table, td {
  border: 1px solid;
}
.table td {
  padding:2px !important;
}

If you want the "th" also to have px padding then

table, td {
  border: 1px solid;
}
.table td, .table th {
  padding:2px !important;
}

answered Dec 06 '16 at 08:52

Gautham

305
4
12

score -1 · Answer 6 · answered Dec 06 '16 at 09:00

-1

You can try like this way

table td, table th {
  border: 1px solid;
}

answered Dec 06 '16 at 09:00

Mohkamaru

1
1

can you make fork the snippet of my qustion, and check your answer? – LF00 Dec 06 '16 at 09:06

How to grouply select multi elements CSS?

6 Answers6