html – Selecting markers (bullets, numbering etc) of a specific list using CSS


I have the following code1 in which the ::marker psudeo-element is used to style the markers of the lists (i.e. bullets and numbering). However, it selects the markers of all the lists that are used in the html document:

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: blue;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>

I only want to style the markers of the unordered list <ul>, so I changed the CSS code of the pseudo-element to:

ul::marker { 
color: blue;
font-size: 23px;
}

But when I run this code, the style doesn’t apply to any list and gives me a simple output without any styles. How do I fix this?


1. The code has been taken from W3Schools



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here