CODEWITHSUNDEEP
csspseudo-element
Metzed
Metzed

Reputation: 491

CSS: How do I style the first Letter, of the first Link, in the first List?

I'm not surprised the CSS doesn't work, but I hope you get the idea. There are 2 lists and I'm trying to target the first letter of the first a in the first ul. In this example that's the B of Beauty Salons. Can I do this with CSS without changing the HTML?

CSS:

.tab-pane .category-headings ul:first-of-type a:first-of-type::first-letter {
    margin-right: 1px;
    padding: 0px 5px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
}

HTML:

<div class="tab-pane" id="b">
    <div class="container-fluid category-headings">
        <div class="row-fluid">
            <div class="span11 offset1">
                <div class="row-fluid">
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./beauty-salons-and-therapy/">Beauty Salons &amp; Therapy</a>
                            </li>
                            <li><a href="./blinds/">Blinds</a>
                            </li>
                        </ul>
                    </div>
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./book-binders/">Book Binders</a>
                            </li>
                            <li><a href="./bookkeeping-services/">Bookkeeping Services</a>
                            </li>
                        </ul>
                    </div>
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./builders/">Builders</a>
                            </li>
                            <li><a href="./building-plans/">Building Plans</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

FIDDLE: http://jsfiddle.net/a4644b8h/2/

Upvotes: 0

Views: 1259

Answers (2)

Alan
Alan

Reputation: 3002

It works if you set the <a> tag to be a block display element:

.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type::first-letter {
    margin-right: 1px;
    padding: 0px 5px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
}

.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type {
    display: inline-block;
}

This is because the :first-letter selector will only apply to block elements, and not inline ones.

Here is an example fiddle.

Upvotes: 2

bowheart
bowheart

Reputation: 4676

First you need to change a few of those selectors. You aren't looking for ul:first-of-type. This will select the first ul inside each of the <div class="span4"> divs. Instead you want to target the first div with class="span4", like so:

.span4:first-of-type

Next, basically the same thing, you don't want to target a:first-of-type, this will select the first a tag in each of those li elements. Instead, target the first li, like so:

li:first-of-type

And then target the a tag inside that first li

So, to put all that together:

.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {

}

Also, as Alan mentioned, the parent of the ::first-letter pseudo-element must be a block-level element, so add

.span4 a { /* make this selector as specific as you need it */
    display: inline-block;
}

And that should do it. JSFiddle here

Upvotes: 1

Related Questions