Combination of Ordered List <ol> within a Description List <dl> is an effective way to present terms and their sequentially structured details. This combination is especially useful for showcasing processes, steps, or rankings associated with specific terms.
- The code uses a description list (<dl>) with terms (<dt>) and descriptions (<dd>).
- Ordered lists (<ol>) inside <dd> provide numbered steps or points.
1. Nested multiple ordered lists inside description list
A description list can contain multiple nested ordered lists, allowing for structured explanations with sequential steps under different headings.
2. Customize bullets and numbers in description list
Customizing bullets and numbers in a description list refers to modifying the default appearance of list items in an HTML description list (<dl>).
3. Custom bullet points or numbers
An ordered list inside a description list allows you to combine detailed descriptions with sequential steps. Using custom bullet points or numbering styles adds clarity and improves visual appeal.
In this example
- CSS Styling: The ol.custom removes default list styles and adds custom numbering using counter-reset and counter-increment.
- Custom Numbers: li::before displays a custom number before each list item, styled in blue and bold.
- Description List: <dl> organizes the content, with <dt> for titles and <dd> for descriptions.
- Ordered List: Each <dd> contains an ordered list (ol) with custom-styled items.
4. Nested ordered list with Roman numerals
A nested ordered list with Roman numerals inside a description list organizes information hierarchically. Roman numerals enhance clarity for sub-steps or grouped content.
In this example
- Custom Main List: ol.custom creates a numbered list with custom numbers using CSS counters.
- Roman Numerals: ol.roman sets list-style-type: upper-roman for nested lists to show Roman numerals.
- Nested Lists: Inner <ol class="roman"> is indented using margin-left.
- Description Structure: Each <dt> has a <dd> with lists organized hierarchically.
- Flexible Styling: Easily add more nesting levels or change styles as needed.
5. Nested ordered lists inside a description list (<dl>)
A nested ordered list inside a description list helps organize main points with detailed substeps. It ensures clear hierarchy and readability for complex processes.
In this example
- Target Nested Lists: The dl dd ol selector applies styles only to <ol> inside <dd>.
- Roman Numerals: list-style-type: upper-roman; sets Roman numerals for nested lists.
- Indentation: margin-left: 20px; indents nested lists for better readability.
- Spacing: margin: 5px 0; adds spacing between list items.
- No Effect on Main List: This approach keeps the main list untouched and styles only the nested lists.
