'Is there a way to use the same ID multiple times using CSS?

<p id = "formatOne">My text here</p>
<!--insert bunch of other stuff in between-->

<!--Reuse formatOne so I don't have to copy-paste the entire CSS formatting again for each use
(similar to functions in most programming languages, write once, call whenever-->

<p id = "formatOne">Different text here</p> <!--like this, but this is obviously wrong since ID must be unique-->

Is there a way to make CSS ID's that are callable like functions?

htmlcss


Solution 1:[1]

id should be unique per HTML element. If you want to apply same style to different HTML elements, you can create class and apply the same class to multiple HTML elements.

.formatOne {
  color:blue;
}
<p class="formatOne">My text here</p>
<p class="formatOne">Different text here</p>

Solution 2:[2]

This is not possible with ids. If you want same multiple uses in css then only class allow you to do so.

<body>
<div class="asd">
    <h1> First </h1>
    <p> First line Statement </p>
</div>
<div class="asd">
    <h1> Second </h1>
    <p> Second line Statement </p>
</div>
<style>

.asd {color : red;
      font-size: 20px}

</style>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NeNaD
Solution 2

Related Questions