CODEWITHSUNDEEP
htmlcss
0x_Anakin
0x_Anakin

Reputation: 3269

Bold on span first letter not working

Example here: http://jsfiddle.net/wsAK2/

Hello I have this html code:

<ul class="sidebar-nav">
    <li class="sidebar-top"></li>
    <li class="active">
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#" data-toggle="collapse" data-target="#dashboard"><i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i></a>
            <ul id="dashboard" class="collapse">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#" data-toggle="collapse" data-target="#charts"><i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i></a>
            <ul id="charts" class="submenu collapse">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-users"></i><span>Users</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-calendar-o"></i><span>Calendar</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-gamepad"></i><span>Services</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-gears"></i><span>Options</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-envelope"></i><span>Email</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
</ul>

and the following css rule: 

.sidebar-nav > li > div > a > span:first-letter {
        font-weight:bold;
}

and here is the span element being inspected with chrome:

media="screen"
.sidebar-nav > li > div > a > span:first-letter {
font-weight: bold;
}

As you can see bold has no effect on it and I can't understand why ? same happens in firefox too.

Upvotes: 1

Views: 1608

Answers (3)

Visionstar
Visionstar

Reputation: 365

The problem is, that the :first-letter doesn't work on inline-element(such as span e.g), but on block/inline-block elements (e.g. p, table caption, table cell, etc).

Therefore it's better to apply :first-letter to a p instead of a span.

 p:first-letter {font-weight: bold;}

If you really need that :first-letter selector on the span, you can still add display:block to the span

 .sidebar-nav > li > div > a > span { display: inline-block; }

Upvotes: 2

j08691
j08691

Reputation: 207973

Per MDN:

A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

An easy way to fix this is to change your span displays to inline-block:

span {
    display:inline-block
}

jsFiddle example

Upvotes: 1

Aya
Aya

Reputation: 11

:first-letter does not appply to inline elements.

.sidebar-nav > li > div > a > span {
    display: inline-block;
}

.sidebar-nav > li > div > a > span:first-letter {
    font-weight:bold;
}

Upvotes: 1

Related Questions