JJTO JJTO - 1 month ago 7
HTML Question

HTML can an element be in more than one class?

I have a ul class element like this:

<ul class="article-list">
<li class="article-item">
<header>Article #1</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!</p>
<h3>Sample Image Title here</h3>
<img src="http://placehold.it/350x150" alt="Placeholder Image">
<ul>
<li class="bold">James</li>
<li>Lily</li>
<li>Harry</li>
</ul>
<p>Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.</p>
</li>
<li class="article-item featured">
<header>Article #2</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!</p>
<p>Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.</p>
</li>


In JS, I can select one of the article-item with in feature class and toggle feature off and toggle feature on another article item:

var article2, articl3;
article2 = $('.featured');
article3 = article2.next();
article2.toggleClass('featured');
article3.toggleClass('featured');


My question is can an element in HTML be assigned to more than one class?

Answer

To assign a HTML element to multiple classes, all you have to do is put spaces between the class names.

<li class="bold important">

The above li element has both the bold and important class associated with it.

EDIT: You have an example of doing this in your question (the last li element).

Comments