I am managing a website that focuses on displaying the line of succession to the British crown. The main content of the site is structured as an ordered list using the <ol> tag.
However, there is a unique challenge. Individuals occasionally drop out of the line of succession (often due to marriage to a Catholic). For example, Prince Michael of Kent was listed as 16th in line on 1978-06-29, but disappeared from the list the following day after marrying a Catholic.
Currently, I simply remove excluded individuals from the list altogether. However, I would prefer to include them while visually distinguishing their entries with a "dimmed" typeface. This poses another issue because it disrupts the ordered sequence of the list when some entries are omitted from numbering.
To address this challenge, I have considered several options:
- Switching to a
<ul>and manually assigning numbers while styling to remove bullets and adjust numbering indentation. - Transitioning to using outdented paragraphs instead of lists.
- Utilizing a table format with a narrow first column for listing.
I am curious if there exists a CSS or HTML trick that could simplify achieving the desired outcome. Is there a more straightforward approach to handle this situation?
Update: The current HTML structure is as follows:
<ol>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">The Prince Charles, Prince of Wales</span>
<br><span class="small">Age 69
(born <a title="Line of Succession on 14 November 1948" href="/1948-11-14">14 November 1948</a>),
<br>Son of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince William, Duke of Cambridge</span>
<br><span class="small">Age 35
(born <a title="Line of Succession on 21 June 1982" href="/1982-06-21">21 June 1982</a>),
<br>Grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince George of Cambridge</span>
<br><span class="small">Age 4
(born <a title="Line of Succession on 22 July 2013" href="/2013-07-22">22 July 2013</a>),
<br>Great grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Princess Charlotte of Cambridge</span>
<br><span class="small">Age 2
(born <a title="Line of Succession on 02 May 2015" href="/2015-05-02">02 May 2015</a>),
<br>Great granddaughter of the sovereign</span></li>
...
</ol>
The CSS styling is primarily based on Bootstrap 4.0 standards, except for the custom styling applied in this section:
span.small {
font-size: 75%;
}