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 create a button using the div element that, upon being clicked, plays a random audio file from a set of options? I found some helpful discussions on this topic here and here. Based on those resources, I created a script utilizing Math.ra ...
I am looking for a way to dynamically set column width in my table. I have provided a stackblitz example which demonstrates that when changing the screen size, only the table border adjusts, but not the column widths. Is there a way to also change the col ...
How can I pass the value of input type=date to a JavaScript date function? In my HTML code, I have used: <input type=date ng-model="dueDate"> <input type="time" ng-model="dueTime"> <button class="button button-block" ng-click="upload_dueda ...
Can someone help me with a coding issue I'm facing? I have an application that contains a large number of buttons which I need to trigger using keyboard presses. Currently, I am using a switch statement for this purpose. However, as the number of butt ...
Is there a way to adjust the content to fill in the margin space when the browser is resized smaller? http://jsfiddle.net/denWG/62/ Html: <div class="jp-sleek jp-jplayer jp-audio"> <div class="jp-gui"> <div class="jp-controls jp-ico ...
Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...
Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...
I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...
I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...
I am encountering a challenge with aligning the input controls in my UI design. Specifically, I am trying to create rectangular borders/containers around each set of input controls and looking for a way to achieve this using Booststrap. For reference, y ...
My goal is to adjust the position of the orange plus sign (located in the lower right corner of the screen) so that it aligns better with the other icons, directly below them. I've tried using padding-bottom, but it doesn't seem to work, while pa ...
In regard to Angular 6, a common issue arises with slow image loading specifically in Chrome, not other browsers. The project utilizes Firebase and the snapshotchange method to fetch images for the Angular project. Image URLs used are like this: . The iss ...
I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...
Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...
After downloading the minified version of Bootstrap and placing it in the root directory of my project, I added the following code to a HTML file located in /views/: <link rel="stylesheet" href="/bootstrap.min.css"> Despite this, the page remained ...
I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...
I've been trying to center my footer, but it keeps aligning to the left. Here's a screenshot for reference Below is the code I'm working with (core.blade.php): <div class="footer"> <div class="row align-self-end& ...
For my event handler, I am trying to use click() but it doesn't seem to be working. Here is the code snippet: $('.ajax-close').click(function( event ){ event.preventDefault(); alert('hi'); $( ' ...
Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...
Seeking some guidance as a newbie here on how to deal with a problem I'm currently tackling. I understand that using an object constructor may not be the most efficient way to handle this, but I'm eager to enhance my knowledge of objects. My quer ...