CODEWITHSUNDEEP
htmlcss
A. L
A. L

Reputation: 12639

Target multiple elements, each of which possess the same class

So I want to basically do

table.mobile, td.mobile, tr.mobile {
    some css
}

is there a way to do this without having to specify each element's class?

So something like 

(table, td, tr).mobile {
    some css
}

Upvotes: 0

Views: 68

Answers (4)

pratik
pratik

Reputation: 100

table,tr,th.mobile{
    some css
}

Upvotes: -1

Alohci
Alohci

Reputation: 82976

Not yet. CSS selectors level 4 specifies :matches() but browsers don't support it yet.

Firefox and Chrome currently support experimental prefixed pseudo-classes :-moz-any and :-webkit-any so for those browsers, you can write

:-moz-any(table, tr, td).mobile { 
  display:inline-block; 
  border-width: 1px; 
  border-style:solid; 
  padding:3px 
}
:-webkit-any(table, tr, td).mobile { 
  display:inline-block; 
  border-width: 1px; 
  border-style:solid; 
  padding:3px 
}
table { border-color:blue; }
tr { border-color:green; }
td { border-color:red; }
p { border-color:black; }
<table class="mobile">
<tr class="mobile">
  <td class="mobile">borders</td>
</tr>
</table>
<p class="mobile">
no border
</p>

Upvotes: 1

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

*.mobile{
background:#00496d;
color:#fff;
}
<table style="width:100%;">
<tr height="25" class="mobile">
<td width="33%">TEXT</td>
<td width="34%">TEXT</td>
<td width="33%">TEXT</td>
</tr>
<tr height="25">
<td class="mobile">TEXT</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
<tr height="25">
<td>TEXT</td>
<td class="mobile">TEXT</td>
<td>TEXT</td>
</tr>
</table>
<div class="mobile" style="width:100px; height:100px;"></div>

Try It Once *.your Classname Or .Classname is possible to Work for your requirement.

Upvotes: 0

Kishan Oza
Kishan Oza

Reputation: 1735

you can use 

.mobile
{
// put css that are common to all element with class called mobile
}

Upvotes: 1

Related Questions