CODEWITHSUNDEEP
csshtml
jeispyun
jeispyun

Reputation: 137

html ordered list attributes "start" and "type" not working in external css

I need to make a list in table of 3*2, with one row of th. All the css should be externally described, and all other css is working except ol attributes: start and type.

I tried several ways just to test: 1. html code:

<td class=cell3> //cell3 is another css I defined for td
    <ol>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

CSS code:

ol{
type: "I";
color: red;
start: "3"; }

2. html code:

<td class=cell3>
    <ol class = r3c1>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

css code:

ol.r3c1{
    type: "I";
    color: red;
    start: "3";
}

For both way, the "color" attribute works, but type and start aren't.. why is that?(both type and start worked if I enter them as in-line style.)

Edit--

I am trying to get row 2 and 3 of column 1 part. it begins with "I." and continues with "III." I initially tried to achieve that by setting different ol attribute class for each 2 cells:

<td class=cell1>
    <ol class=r2c1>
        <li>ol1 - item1</li>
    </ol>
</td>
<td class=cell2>row2 col2</td>
</tr>
<tr>
<td class=cell3>
    <ol class = r3c1>
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

css:

ol.r2c1{
    type: "I";
}
ol.r3c1{
    type: "I";
    start: "3";
}

(Which is incorrect since type and start both are not css attributes.)

Upvotes: 4

Views: 3433

Answers (3)

Amadan
Amadan

Reputation: 198418

type and start are not CSS properties. Dealing with counters in CSS is a bit complex, as you have to do everything manually:

ol {
  counter-reset: mycounter 2; /* whenever we see `<ol>`, `mycounter` is set to 2 */
}

li {
  list-style: none;  /* disable the default counter */
}

li::before {
  counter-increment: mycounter; /* whenever we see <li>, we increment `mycounter` by 1 */
  content: counter(mycounter, lower-roman) ". "; /* and display it before the <li> */
}
<ol>
  <li>number three</li>
  <li>number four</li>
</ol>

EDIT:

li {
  list-style: none;
}

.r2c1 {
  counter-reset: c1counter;
}
.r3c1 {
  counter-reset: c1counter 2;
}

tr > td:first-child li::before {
  counter-increment: c1counter; /* whenever we see <li>, we increment `mycounter` by 1 */
  content: counter(c1counter, lower-roman) ". "; /* and display it before the <li> */
}

.cell1 { background: #fcdffe; }
.cell2 { background: #c4fdb8; }
.cell3 { background: #ffffff; }
.cell4 { background: #ffffc1; }
<table>
  <tr>
    <td class="cell1">
      <ol class="r2c1">
        <li>ol1 - item1</li>
      </ol>
    </td>
    <td class="cell2">row2 col2</td>
  </tr>
  <tr>
    <td class="cell3">
      <ol class="r3c1">
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
      </ol>
    </td>
    <td class="cell4">row3 col2</td>
  </tr>
</table>

Upvotes: 3

falconimogollon
falconimogollon

Reputation: 111

ol.r3c1{
    list-style-type: upper-roman;
    color: red;
}
p{
    color: black;
}

ol.r2{
    list-style-type: upper-roman;
    color: red;
}
<td class=cell3> 
    <ol class="r2" start="3">
        <li>ol1 - item2</li>
        <li><p>Color Black</p></li>
    </ol>
</td>
--------------------------------------
<td class=cell3> 
    <ol class="r3c1">
        <li>ol1 - item2</li>
        <li><p>Color Black</p></li>
    </ol>
</td>
-------------------------------------

Upvotes: 0

Anakin
Anakin

Reputation: 1291

type and start is HTML attributes, not CSS styles.

You can use list-style-type: upper-roman instead of HTML attribute. But, for start there is no substitute in CSS.

<td class=cell3>
    <ol class="r3c1" start="3">
        <li>ol1 - item2</li>
        <li>ol1 - item3</li>
    </ol>
</td>

CSS:

ol.r3c1{
    list-style-type: upper-roman;
    color: red;
}

https://jsfiddle.net/knfswo42/

list-style-type documentation

Upvotes: 0

Related Questions