My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work...
#fletter span:first-letter {
font-weight: 600;
font-size: 25px;
}
<span id="fletter">
The :first-letter selector functions perfectly with my p elements.
p:first-letter {
font-weight: 600;
font-size: 25px;
}
<p>Lorem Ipsum</p>
The reason for this limitation is that the :first-letter pseudo-element can only be applied to block-level elements.
An alternative approach is to style the span element as a block-level element:
#fletter span {
display:block;
}
#fletter span:first-letter {
font-weight: 600;
font-size: 25px;
}
:first-letter cannot be applied to inline elements like a span.
Other inline elements include:
b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea
:first-letter is effective on block elements such as paragraphs, table captions, table cells, list items, or those with the inline-block property enabled.
If you wish to use a :first-letter selector within a span, you can do so by formatting it in this manner:
p span:first-letter {font-size: 500px !important;}
span {display:block}
<p>
<span>text here</span>
</p>
The W3C states that the first-letter property is designed to be used with block elements.
Unfortunately, this means it won't work with spans. One possible workaround could involve creating an inner span for the first letter using Javascript or adjusting the span's display property to inline-block.
When looking at your current code, it appears that you are trying to target a span element within an element that has the id of fletter. In order to achieve this, you can make use of the following CSS:
#fletter:first-letter {
font-weight: 600;
font-size: 25px;
display: block;
}
Alternatively, if you are certain that the element will always be a span, you can use the following CSS instead:
span#fletter:first-letter {
font-weight: 600;
font-size: 25px;
display: block;
}
It appears that you may have overlooked the necessary 2 colons in your code. I personally have had success with this code on Chrome and other browsers:
#<idname>::first-letter{
color: green;
font-size: 100px;
}
The first-letter pseudo-element can only be applied to block-level elements. By default, the span element is inline, so you have two options: either change the display of the span to block using `display:block`, or use a div element instead since divs are block-level by default.
#fancy:first-letter {
font-size: 120px;
color: #4B0082;
}
Give this a shot. It's been successful for me.
Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...
I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...
I have a code snippet that executes in a certain sequence and performs as expected. <script> $.getJSON(url1, function (data1) { $.getJSON(url2, function (data2) { $.getJSON(url3, function (data3) { //manipulate data1, data2, ...
Hello, I am a beginner in programming and I have been working hard to learn. Unfortunately, I encountered a SyntaxError: missing) after argument list in c://.../list.ejs while compiling ejs error and I am struggling to find the solution. I am reaching out ...
I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...
It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...
Incorporating both Bootstrap and DataTable into my design has caused conflicts with CSS styles. This issue extends beyond just these libraries, making me wonder if there is a way to prioritize my own styles over library styles. Can anyone provide guidanc ...
Currently, I am dynamically injecting HTML into a page using JQuery AJAX. The injected HTML contains script and link tags for JS and CSS files respectively. The issue I am facing is that my initPage() function runs before the script containing its definiti ...
Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...
Having some trouble as a newbie again))) Can you please help me out, guys? I'm having an XML file with the following data: <Page> <Content><p>Article content</p> <h1 style="font-style ...
I am interested in implementing pushstate functionality, which involves making an ajax request, changing the URL, and adjusting the browser history stack. However, since pushstate is not universally supported by all browsers, I need to find a workaround f ...
This is the code snippet I am working with: <form> <table> <tr> <td>Month</td> <td> <select name=""> <option value="">January</optio ...
Having some trouble with the jQuery delay() function. I'm using it to pause a toggleClass action until after a slideUp animation on one of my divs, but it doesn't seem to be working as expected. I want a bar with rounded corners that expands whe ...
How can I show the value from a text field in a column chart? I found the code for the chart on this website(). I tried using the code below, but nothing happens. Can someone please assist me? <script> window.onload = function () { ...
Hey there, I have managed to create a textarea within a div by using -webkit-appearance. However, I am currently struggling to add an event to this div on key press. I have been trying my best to figure it out but seem to be missing something. If you coul ...
I am currently developing a fully web-based app-style layout. One issue I'm facing is that the navigation menu jumps slightly when I use my S3 to auto-scroll to the top by dragging. However, if I scroll up manually without lifting my finger, this pro ...
I'm attempting to create a laser beam that can shoot enemies on the screen, much like in classic games such as Space Invaders or Galaga. However, I am encountering difficulties getting the laser to move when I click the button. Below is the code I hav ...
I am at my wits' end trying different solutions to make this work properly. The text on the slider of my homepage appears jumbled up when viewed on a mobile device. I suspect it might be related to responsive design? Could someone please take a look ...
Today, I encountered the task of converting outdated attributes on a page to make it more XHTML friendly. This led me to consider the anchor tag and its usage: Initially, I had anchor tags in the form of <a name="someName"></a>. However, upon ...
Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...