How can I format the initial letter in the primary link within the initial list using CSS?

Question

How can I format the initial letter in the primary link within the initial list using CSS?

It's no surprise that the CSS isn't cooperating, but I'm hoping you can grasp the concept. There are two lists and my aim is to style the first letter of the first a in the initial ul. In this instance, it would be the B in Beauty Salons. Is it possible to achieve this using CSS without altering the HTML code?

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/

css pseudo-element

Answer 1

Answer №1

To make it work, you need to change the <a> tag to display as a block 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;
}

The reason for this is that the :first-letter selector will only affect block elements, not inline ones.

Check out this example on JSFiddle.

Answer 2

To make it work, you need to change the <a> tag to display as a block 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;
}

The reason for this is that the :first-letter selector will only affect block elements, not inline ones.

Check out this example on JSFiddle.

Answer 3

Answer №2

To start, it's important to make a few adjustments to the selectors being used. Instead of targeting ul:first-of-type, focus on selecting the initial div with the class="span4". Here's an example:

.span4:first-of-type

Similarly, avoid trying to select a:first-of-type, as this will choose the first a tag within each li element. Target the first li instead:

li:first-of-type

Following that, target the a tag within that initial li.

Putting everything together:

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

}

Additionally, as mentioned by Alan, the parent of the ::first-letter pseudo-element should be a block-level element, so include:

.span4 a { /* ensure specificity for this selector */
    display: inline-block;
}

These adjustments should suffice. Refer to the JSFiddle link for an illustration.

Answer 4

To start, it's important to make a few adjustments to the selectors being used. Instead of targeting ul:first-of-type, focus on selecting the initial div with the class="span4". Here's an example:

.span4:first-of-type

Similarly, avoid trying to select a:first-of-type, as this will choose the first a tag within each li element. Target the first li instead:

li:first-of-type

Following that, target the a tag within that initial li.

Putting everything together:

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

}

Additionally, as mentioned by Alan, the parent of the ::first-letter pseudo-element should be a block-level element, so include:

.span4 a { /* ensure specificity for this selector */
    display: inline-block;
}

These adjustments should suffice. Refer to the JSFiddle link for an illustration.

How can I format the initial letter in the primary link within the initial list using CSS?

Answer №1

Answer №2

Similar questions

Styling the navigation bar using CSS and positioning a <div> element underneath

What are the steps to change table characteristics?

The troubleshooting issue with jQuery animate Scrolltop malfunctioning

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Tell me about the CSS ruby-align characteristic

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I'm having some trouble getting my HTML menu within the header tag to hover correctly in Angular. Can someone please provide

I'm working in JavaFX and I have several line charts that I need to customize individually using CSS styling

Flickering problems occur when using Jquery to load MVC Views upon hovering

Use jQuery to retrieve HTML content excluding comments

Use Flexbox hover effect to display submenu text exclusively in the column being hovered

The CSS property col visibility:collapse is ineffective on the Chrome browser

What's the best way to include CSS and Javascript in an HTML document?

Is there a way to adjust the font size of a select option?

Ensure the td element is positioned at the top alongside newly added elements

Leveraging Selenium for assessing the visibility of elements in Print media applications

Using div tags may cause rendering issues

Changing the background color of a PHP input based on the webpage being viewed - here's how!

Scrollbar styling functions flawlessly on Chrome and Safari, but encounters issues on Mozilla Firefox