{"id":14192,"date":"2013-02-14T20:03:57","date_gmt":"2013-02-15T03:03:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14192"},"modified":"2020-06-18T07:53:39","modified_gmt":"2020-06-18T14:53:39","slug":"first-letter","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-letter\/","title":{"rendered":"::first-letter"},"content":{"rendered":"\n<p><code>::first-letter<\/code> is a pseudo element which allows you to style the first letter in an element, without needing to stick a &lt;span&gt; tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a <code><\/code> tag. You can style that first letter as you would a real element with:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p::first-letter {\n  font-weight: bold;\n  color: red;\n}<\/code><\/pre>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>The first letter is bold and red&lt;\/p><\/code><\/pre>\n\n\n\n<p>The result is as if you had a faux element around the first letter:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Just an example, does not work! -->\n&lt;p>\n  &lt;firstletter>T&lt;\/firstletter>he first letter is bold and red.\n&lt;\/p><\/code><\/pre>\n\n\n\n<p><span style=\"color: red; font-weight: bold;\">T<\/span>he first letter is bold and red<\/p>\n\n\n\n<ul><li>The pseudo element only works if the parent element is a block container box (in other words, it doesn&#8217;t work on the first letter of <code>display: inline;<\/code> elements.)<\/li><li>If you have both a <code>::first-letter<\/code> and <code>::first-line<\/code> on an element, the first letter will inherit from the first line styles, but styles on the <code>::first-letter<\/code> will overwrite when styles conflict.<\/li><li>If you generate content with <code>::before<\/code>, the first letter or punctuation character, whether it&#8217;s part of the original text node or created with generated content, will be the target.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul><li>When using for drop-caps, use in conjunction with <code>p:first-of-type<\/code> so not every first letter gets styled<\/li><li><a href=\"http:\/\/codepen.io\/estelle\/pen\/KDjyB\" rel=\"noopener\">Example Pen &#8211; with Generated Content<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/wiki\/CSS\/Selectors\/pseudo-elements\/:first-letter\" rel=\"noopener\">W3C Wiki <\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-selectors\/#first-letter\" rel=\"noopener\">W3C CSS3 Selectors module<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-first-letter\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">3.5<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">3<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">5.0-5.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p><strong>Note:<\/strong> For Internet Explorer 8 and down, use a single colon <code>:first-letter<\/code> instead of the double-colon notation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a &lt;span&gt; tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a tag. You can style that [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14182,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14190,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","url_meta":{"origin":14192,"position":0},"title":"::first-line","date":"September 6, 2011","format":false,"excerpt":"The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249770,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/initial-letter\/","url_meta":{"origin":14192,"position":1},"title":"initial-letter","date":"January 13, 2017","format":false,"excerpt":"initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies. You may have seen something like this on news sites, where the first letter of a leading paragraph is larger than the rest of\u2026","rel":"","context":"In \"initial-letter\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14063,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/","url_meta":{"origin":14192,"position":2},"title":"letter-spacing","date":"March 12, 2013","format":false,"excerpt":"The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font's default. Using font-relative values is recommended, so that the letter-spacing\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":144460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-transform\/","url_meta":{"origin":14192,"position":3},"title":"text-transform","date":"July 24, 2013","format":false,"excerpt":"The text-transform property in CSS controls text case and capitalization. .lowercase { text-transform: lowercase; } Text-Transform Values lowercase makes all of the letters in the selected text lowercase. uppercase makes all of the letters in the selected text uppercase. capitalize capitalizes the first letter of each word in the selected\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318556,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/","url_meta":{"origin":14192,"position":4},"title":"font-synthesis","date":"August 5, 2020","format":false,"excerpt":"The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn't include them. Let's take Lato from Google Fonts as an example. It says there are 10 different variations of the font. Each one of those font variations\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5985,"url":"https:\/\/css-tricks.com\/snippets\/css\/drop-caps\/","url_meta":{"origin":14192,"position":5},"title":"Drop Caps","date":"March 19, 2010","format":false,"excerpt":"The Accessible Way Your best bet is to watch Ethan's 5-minute video and then reference this: CodePen Embed Fallback The cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=\"firstcharacter\">L<\/span> orem ipsum dolor\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14192"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14192"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14192\/revisions"}],"predecessor-version":[{"id":313104,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14192\/revisions\/313104"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14182"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14192"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}