CODEWITHSUNDEEP
jqueryhtmlcss
Hakan Wergeni
Hakan Wergeni

Reputation: 33

Ordered numbers bold without adding more tags

How do I get the ordered numbers bold without adding more tags?
Possible in jQuery?

  1. first element
  2. secondelement
  3. thirdelement

1. first element
2. secondelement
3. thirdelement

Best regards
hakan

Upvotes: 3

Views: 1633

Answers (3)

Ray
Ray

Reputation: 21905

I don't think you can do it without some extra tags, but it's not too bad:

li { font-weight:bold;  }
.text { font-weight:normal !important; }


<ol>
  <li><span class="text">first element</span></li>
  <li><span class="text">secondelement<span class="text"></li>
  <li><span class="text">thirdelement<span class="text"></li>
</ol>

Upvotes: 2

Mikael Svenson
Mikael Svenson

Reputation: 39695

Assuming your sample list is an ol list, the following will do the trick.

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("ol li").each(function (index) {
                    $(this).wrapInner("<span />");
                });
                $("ol").css("font-weight", "bold");
                $("ol li span").css("font-weight", "normal");
            }
            );
        </script>
    </head>
    <body>
        <ol>
            <li>first element</li>
            <li>secondelement</li>
            <li>thirdelement</li>
        </ol>
    </body>
</html>

Upvotes: 7

Blair McMillan
Blair McMillan

Reputation: 5349

You can't bold just the list item.

Upvotes: 2

Related Questions