CODEWITHSUNDEEP
htmlcss
4ndro1d
4ndro1d

Reputation: 2976

HTML style list elements with decreasing font-size depending on element

I want to decrease the font size of each element with increasing number in list:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
</ul>

Should result in something like

where the first element has a font size of 25px, second has 20px, third has 15 px and so on.

Is there a way to do this with CSS only?

Upvotes: 1

Views: 1182

Answers (5)

Jordan Clark
Jordan Clark

Reputation: 772

You could achieve this effect by add the following CSS to your style sheet:

li:nth-child(1) {
    font-size: 25px;
}

li:nth-child(2) {
    font-size: 20px;
}

li:nth-child(3) {
    font-size: 15px;
}

li:nth-child(4) {
    font-size: 10px;
}

li:nth-child(4) {
    font-size: 5px;
}

As far as I know, there is no automated way of doing this in pure CSS. You would need to use JavaScript (or a JavaScript library like jQuery).

However, as the code sample above shows, the fifth LI element would be a font-size value of zero (which would render as invisible), and any after that would have a negative number for its value (which would be invalid).

Upvotes: 5

goliath309
goliath309

Reputation: 11

You can use the nth-child from css:

`<ul class='ultag'>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
</ul>
<style>
 .ultag li:nth-child(1) { font-size: 25px; }
 .ultag li:nth-child(2) { font-size: 20px; }
 .ultag li:nth-child(3) { font-size: 15px; }
 .ultag li:nth-child(4) { font-size: 10px; }
</style>
`

Upvotes: 0

Caleb Anthony
Caleb Anthony

Reputation: 1123

You don't need Javascript for this solution, you can do it purely in CSS.

CSS

li {
  font-size: 100%;
}

li:nth-child(1) {
  font-size: 90%;
}

li:nth-child(2) {
  font-size: 80%;
}

li:nth-child(3) {
  font-size: 70%;
}

li:nth-child(4) {
  font-size: 60%;
}

While this doesn't go infinitely deep, you mentioned that the max is 4, so this should be a good solution.

If you need to go infinitely deep, I suggest a JS solution, although the times when that is needed are few and far between.

Upvotes: 2

JDavila
JDavila

Reputation: 449

Classes can be used to changed the size, add a class to each li element and the CSS can be created to change the size accordingly.

<ul>
 <li class="one">Number 1</li>
 <li class="two">Number 2</li>
 <li class="three">Number 3</li>
</ul>

This is a start: https://jsfiddle.net/he5gs4z0/2/

Related post: Can you use if/else conditions in CSS?

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Here is an example using JQuery, see example https://jsfiddle.net/kvb5hb6f/3/

This is setting the li font size starting at 25 and incriminating -5 then when the size hits 5 it does not go any smaller.

<ul id="numbers">
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
  <li>Number 7</li>
  <li>Number 8</li>
  <li>Number 9</li>
</ul>
<script>
  var listItems = $("#numbers li");
  var fontHeight = 25;
  listItems.each(function(idx, li) {
    var product = $(li);
    if (fontHeight >= 5) {
      $(product).css("fontSize", fontHeight + "px");
      fontHeight = fontHeight - 5;
    } else {
      fontHeight = 5;
      $(product).css("fontSize", fontHeight + "px");
    }
  });

</script>

Upvotes: 0

Related Questions