This question already has answers here:
How to apply CSS to the first letter after :before content?
(4 answers)
Closed 4 months ago.
Given this markup
<span class="something">world</span>
and this CSS
.something::before {
content: 'hello';
}
I want to add CSS to capitalise the first letter that isn't in the before psudo element.
i.e. the w from world.
Initially I (somewhat naively) thought that the following would work:
.something::first-letter {
text-transform: uppercase;
}
But it actually capitalised the first letter of the before psudo element, and only that.
I also tried to apply :not but this isn't valid on psudo elements.
Is it possible to use CSS to capitalise the first-letter that isn't part of the before psudo element?
Usually you would do this with the :first-letter pseudo element, but you are using :before.
This inserts text before the actual content of your paragraph, rather than the first letter of the actual content, :first-letter would match the first letter of the :before content instead.
That means that instead of this:
<p class="normal">
<p:before>Former - </p:before>
<p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will be normal and will have font size 40px;
</p>
You actually get this:
<p class="normal">
<p:before>
<p.normal:first-letter>F</p.normal:first-letter>ormer -
</p:before>
First character of this paragraph will be normal and will have font size 40px;
</p>
Due to how CSS generated content works, I don't think there's a solution in pure CSS to reach the first letter of the actual content once you have inserted content before it.
As an alternative, you could use a span in place of the :first-letter pseudo-element, to which you can then apply the blue color, but that means you have to insert extra elements:
<p class="normal"><span>F</span>irst character of this paragraph will be normal and will have font size 40px;</p>
p.normal {
font-size: 40px;
color: blue;
}
Related
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.