:First-Letter Selector Doesn't Work for Link

Pseudo element first letter does not work

::first-selector doesn't work on inline elements, such as a tags.

Make link inline-block

.logo-home > .navbar-brand {
  display: inline-block;
}

.navbar-brand::first-letter, .subscribe-form::first-letter, footer h4::first-letter {
    color: #a32424;
    letter-spacing: 0.02em;
}

<div class="mx-auto navigation-desktop-home">
    <div class="logo-home">
        <a class="navbar-brand text-center w-100" href="/home.html">5test</a>
    </div>
</div>

CSS :first-letter not working

::first-letter does not work on inline elements such as a span. ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block.

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

p::first-letter {font-size: 500px;}

or if you want a ::first-letter selector in a span then write it like this:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN provides the rationale for this non-obvious behaviour:

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
...
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.

Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen

Examples

http://jsfiddle.net/sandeep/KvGr2/9/
http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

References

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
http://reference.sitepoint.com/css/pseudoelement-firstletter

CSS - First-letter selection not working with ID

That is because :first-letter can only be used on block level elements.

One solution could be to display the span as a block level element:

#fletter span {
   display:block;
}

#fletter span:first-letter {
   font-weight: 600;
   font-size: 25px;
}

jsFiddle here.

Combination :before and :first-letter is not working when adding display:flex

From the specification:

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements. Note: A future version of this specification may allow this pseudo-element to apply to more display types.

As you can read, a flexbox container is not listed actually. It will probably be in the future:

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

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