CODEWITHSUNDEEP
htmlcss
Tyler225
Tyler225

Reputation: 21

Too many class calls, or is this proper?

Ok so basically I was working on a color scale and I'm not new to html and css programming, but I have this problem, that problem being, a cluster of classes being called in separate paragraph tags. To me it doesn't look very good just because it's all jumbled up; class, after class, is there another approach to this. I do how ever have an external css style sheet so I didn't write it within my html...

<!DOCTYPE html>
<html>
 <head>
  <title>Color</title>
  <link rel="stylesheet" type="text/css" href="Color.css">
 </head>
   <body>
     <h1>pH Scale</h1>
     <p class="fourteen">14.0 VERY ALKALINE</p>
     <p class="thirteen">13.0</p>
     <p class="twelve">12.0</p>
     <p class="eleven">11.0</p>
     <p class="ten">10.0</p>
     <p class="nine">9.0</p>
     <p class="eight">8.0</p>
     <p class="seven">7.0 NEUTRAL</p>
     <p class="six">6.0</p>
     <p class="five">5.0</p>
     <p class="four">4.0</p>
     <p class="three">3.0</p>
     <p class="two">2.0</p>
     <p class="one">1.0</p>
     <p class="zero">0.0 VERY ACID</p>
   </body>
</html>

Upvotes: 2

Views: 90

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

Using CSS it will be painful and verbose like adding classes in HTML.
So I would use JS or jQuery like in the following example. Thanks to hsla colors you can do it in a couple of lines:

LIVE DEMO

Note: wrap all your p into a <div id="scale">

var $p = $('#scale p'),
    len = 360/$p.length;

$p.css({background: function(i){
  return "hsla("+(i*len)+",50%,70%, 0.9)";
}});

enter image description here

Upvotes: 2

MarcinJuraszek
MarcinJuraszek

Reputation: 125650

you can use nth-of-child:

<div class="scale">
    <h1>pH Scale</h1>
    <p>14.0 VERY ALKALINE</p>
    <p>13.0</p>
    <p>12.0</p>
    <p>11.0</p>
    <p>10.0</p>
    <p>9.0</p>
    <p>8.0</p>
    <p>7.0 NEUTRAL</p>
    <p>6.0</p>
    <p>5.0</p>
    <p>4.0</p>
    <p>3.0</p>
    <p>2.0</p>
    <p>1.0</p>
    <p>0.0 VERY ACID</p>
</div>

css

div.scale p:nth-of-type(1) { /* 14 */ };
div.scale p:nth-of-type(2) { /* 13 */ };
/* ... */

Upvotes: 0

Josh Valdivieso
Josh Valdivieso

Reputation: 1184

Your approach is fine if your going to use the classes elsewhere within your project, if your not then you should use id's. Or you could use CSS to change the color and so forth like this.

HTML

<div id="ph_wrap">
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
   <p>Four</p>
   <p>Five</p>
   <p>Six</p>
</div>

CSS

#ph_wrap p:nth-child(1){
   color:red;
}

#ph_wrap p:nth-child(2){
   color:green;
}

...

You could also use jquery if you wanted to. But as I stated above your code is fine if your using the classes elsewhere and not just within this snippet.

Upvotes: 0

Related Questions