devdocs/html/global_attributes%2Fclass.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<header><h1>class</h1></header><div class="section-content"><p>The <code>class</code> <a href="../global_attributes">global attribute</a> is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the DOM method <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName"><code>document.getElementsByClassName</code></a>.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-class.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. For example, <em>attribute</em> to describe an attribute rather than <em>italics</em>, although an element of this class may be presented by <em>italics</em>. Semantic names remain logical even if the presentation of the page changes.</p>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes:classes-2">HTML Standard <br><small># global-attributes:classes-2</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>class</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/className"><code>element.className</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList"><code>element.classList</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">Introduction to CSS</a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class</a>
  </p>
</div>