Duplicate class names, is this ok to do?


#1

Referring to this:
https://jsfiddle.net/subdo9at/44/

class="black
class="blue"
class="black
class="blue"
class="black
class="blue"

.blue {
  fill: #0059dd;
}

.black {
  fill: black;
}

	<path class="black" d="M26.555,20.404c-1.893,0-3.667-0.731-4.995-2.06c-1.328-1.328-2.06-3.102-2.06-4.995   c0-1.893,0.732-3.667,2.06-4.995l4.858-4.791C27.749,2.231,29.522,1.5,31.416,1.5c1.893,0,3.667,0.731,4.995,2.06   c1.328,1.328,2.06,3.102,2.06,4.995c0,1.893-0.732,3.667-2.06,4.995l-4.858,4.791C30.222,19.672,28.448,20.404,26.555,20.404z    M31.445,4.5c-1.092,0-2.112,0.419-2.874,1.181l-4.858,4.792c-0.764,0.764-1.184,1.784-1.184,2.876s0.419,2.112,1.181,2.874   s1.782,1.181,2.874,1.181s2.112-0.419,2.874-1.181l4.858-4.792c0.764-0.764,1.184-1.785,1.184-2.876s-0.419-2.112-1.181-2.874   C33.557,4.919,32.537,4.5,31.445,4.5z"/>
	<path class="blue" d="M31.415,2c1.759,0,3.408,0.68,4.642,1.913c1.234,1.234,1.913,2.882,1.913,4.641   c0,1.759-0.68,3.408-1.909,4.637l-4.865,4.799c-1.234,1.234-2.882,1.913-4.642,1.913c-1.759,0-3.408-0.68-4.642-1.913   C20.68,16.756,20,15.108,20,13.349s0.68-3.408,1.909-4.637l4.865-4.799C28.008,2.68,29.656,2,31.415,2 M26.585,17.904   c1.225,0,2.371-0.471,3.223-1.323l4.865-4.799C35.528,10.926,36,9.78,36,8.555c0-1.225-0.471-2.371-1.328-3.227   C33.816,4.472,32.67,4,31.445,4c-1.225,0-2.371,0.471-3.222,1.323l-4.865,4.799c-0.856,0.856-1.328,2.002-1.328,3.227   c0,1.225,0.471,2.371,1.328,3.227C24.213,17.432,25.36,17.904,26.585,17.904 M31.415,1c-1.939,0-3.878,0.735-5.349,2.206L21.206,8   c-2.942,2.942-2.942,7.756,0,10.697c1.471,1.471,3.41,2.206,5.349,2.206c1.939,0,3.878-0.735,5.349-2.206l4.86-4.794   c2.942-2.942,2.942-7.756,0-10.697C35.293,1.735,33.354,1,31.415,1L31.415,1z M26.585,16.904c-0.958,0-1.853-0.367-2.52-1.035   c-0.667-0.667-1.035-1.562-1.035-2.52c0-0.958,0.367-1.853,1.035-2.52l4.86-4.794C29.592,5.367,30.487,5,31.445,5   c0.958,0,1.853,0.367,2.52,1.035C34.633,6.702,35,7.597,35,8.555s-0.367,1.853-1.035,2.52l-4.86,4.794   C28.438,16.536,27.542,16.904,26.585,16.904L26.585,16.904z"/>

<path class="black" d="M8.555,38.5c-1.893,0-3.667-0.731-4.995-2.06c-1.328-1.328-2.06-3.102-2.06-4.995   c0-1.893,0.732-3.667,2.06-4.995l4.89-4.89c1.328-1.329,3.102-2.06,4.995-2.06s3.667,0.731,4.995,2.06   c1.328,1.328,2.06,3.102,2.06,4.995c0,1.893-0.732,3.667-2.06,4.995l-4.89,4.89C12.222,37.769,10.448,38.5,8.555,38.5z    M13.475,22.5c-1.092,0-2.112,0.419-2.874,1.181l-4.89,4.89c-0.762,0.761-1.181,1.782-1.181,2.874s0.419,2.112,1.181,2.874   S7.493,35.5,8.584,35.5s2.112-0.419,2.874-1.181l4.89-4.89c0.762-0.761,1.181-1.782,1.181-2.874s-0.419-2.112-1.181-2.874   C15.587,22.919,14.566,22.5,13.475,22.5z"/>
	<path class="blue" d="M13.445,20c1.759,0,3.408,0.68,4.642,1.913C19.32,23.147,20,24.796,20,26.555   c0,1.759-0.68,3.408-1.913,4.642l-4.89,4.89C11.963,37.32,10.314,38,8.555,38c-1.759,0-3.408-0.68-4.642-1.913   C2.68,34.853,2,33.204,2,31.445s0.68-3.408,1.913-4.642l4.89-4.89C10.037,20.68,11.686,20,13.445,20 M8.585,36   c1.225,0,2.371-0.471,3.227-1.328l4.89-4.89c0.856-0.856,1.328-2.002,1.328-3.227c0-1.225-0.471-2.371-1.328-3.227   C15.846,22.471,14.7,22,13.475,22c-1.225,0-2.371,0.471-3.227,1.328l-4.89,4.89C4.501,29.074,4.03,30.22,4.03,31.445   c0,1.225,0.471,2.371,1.328,3.227C6.213,35.529,7.36,36,8.585,36 M13.445,19c-1.939,0-3.878,0.735-5.349,2.206l-4.89,4.89   c-2.942,2.942-2.942,7.756,0,10.697C4.677,38.265,6.616,39,8.555,39c1.939,0,3.878-0.735,5.349-2.206l4.89-4.89   c2.942-2.942,2.942-7.756,0-10.697C17.323,19.735,15.384,19,13.445,19L13.445,19z M8.585,35c-0.958,0-1.853-0.367-2.52-1.035   c-0.667-0.667-1.035-1.562-1.035-2.52c0-0.958,0.367-1.853,1.035-2.52l4.89-4.89C11.622,23.367,12.517,23,13.475,23   c0.958,0,1.853,0.367,2.52,1.035c0.667,0.667,1.035,1.562,1.035,2.52s-0.367,1.853-1.035,2.52l-4.89,4.89   C10.438,34.633,9.542,35,8.585,35L8.585,35z"/>

	<path class="black" d="M14.879,26.5c-0.491,0-0.928-0.243-1.2-0.667c-0.348-0.541-0.23-1.303,0.278-1.812l10.029-10.029   c0.301-0.301,0.711-0.474,1.124-0.474c0.284,0,0.549,0.083,0.769,0.242c0.346,0.25,0.555,0.619,0.587,1.037   c0.033,0.412-0.116,0.816-0.408,1.108L15.876,26.087C15.609,26.354,15.255,26.5,14.879,26.5z"/>
	<path class="blue" d="M25.11,14.018L25.11,14.018c0.18,0,0.34,0.05,0.475,0.147c0.304,0.22,0.37,0.515,0.383,0.671   c0.021,0.266-0.075,0.527-0.264,0.715L15.522,25.734C15.35,25.905,15.122,26,14.88,26c-0.317,0-0.601-0.159-0.78-0.437   c-0.218-0.34-0.127-0.85,0.211-1.188L24.34,14.345C24.545,14.14,24.833,14.018,25.11,14.018 M25.11,13.018   c-0.537,0-1.079,0.222-1.477,0.62L13.604,23.667c-0.644,0.644-0.837,1.669-0.345,2.436C13.642,26.701,14.261,27,14.88,27   c0.488,0,0.977-0.186,1.35-0.559l10.182-10.182c0.819-0.818,0.739-2.195-0.24-2.904C25.854,13.125,25.483,13.018,25.11,13.018   L25.11,13.018z"/>

</svg>

#2

Yes, you can have multiple classes with the same name on a page. You just can't have multiple id's with the same name on a page.


#3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.