Is there any way to apply css formatting to just the first (or nth) line of text in CSS?
Suppose I have:
<h2>This is a line of text on my web page</h2>
That gets displayed as:
This is a line of text
on my web page
Is there a way to specify, a priori, separate formatting for the first and second lines without knowing where the line break will occur?
There is only the :first-line pseudo-element; there isn't any for the second, third, fourth, ... nth lines.
h2 {
font-size: 2em;
color: blue;
}
h2:first-line {
color: red;
}
Use the :first-line selector (CSS2) or ::first-line selector (CSS3).
h2:first-line {
font-weight: bold;
}
Related
Color is not applied as per CSS on the 3rd row, using first child(div.multiple-alerts .normal:first-child span).
https://jsfiddle.net/Lh6cpzeb/
div.multiple-alerts .high:first-child span{ color: yellow; }
div.multiple-alerts .normal:first-child span{ color: yellow; }
<div class="multiple-alerts">
<div class="cls high"><span>high</span></div>
<div class="cls high"><span>high</span></div>
<div class="cls normal"><span>normal</span></div>
<div class="cls normal"><span>normal</span></div>
</div>
The CSS is being applied the correct way, but I think your understanding of how the rules work may be slightly off. You're selecting the first child of all divs with class multiple-alerts which also has the class of normal. Well, the first child of multiple-alerts does not have the class normal (at least in the snippet you included), so your selector matches exactly zero elements.
Now, you may be tempted to go for something like first-of-type, but that only applies to tags, not classes. So, here's a workaround that you might find useful:
Let's say the standard colour for these spans is black, we will set all the spans inside .normal with yellow colour, then override it for all but the first one, like so:
div.multiple-alerts .normal span {
color: yellow;
}
div.multiple-alerts .normal ~ .normal span {
color: black;
}
If you're not sure how this is working here, the ~ works similarly to the +, but is broader. The + can only match with the very next sibling, whereas the ~ can match with any succeeding sibling - i.e. after, but not before.
:nth-child(i) selector will solve the problem
div.multiple-alerts .cls:nth-child(3) span{ color: yellow; }
I need to change size, color, and weight of every first letter of each word. I am not talking about Capitalize each first letter. I mean that target first letter and apply style according to my choice.
: Click Here to see example about which i am talking.
You should wrap every single word with a tag and use ::first-letter CSS selector .
Also, note that this selector does not work on inline elements. If you want to use it with an inline element, such a <span>, make sure you set display:inline-block (see here for more details: https://stackoverflow.com/a/7631782/11298742)
example :
p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
color: red;
font-weight: bold;
}
<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>
Which CSS selector to use to select the first letter of the element with id?
I want to make the first letter of the element with id 'special' green and 100px font size.
I tried :
#special:nth-of-type(1){
color: green;
font-size: 100px;
}
There's a ::first-letter pseudoselector
http://www.w3schools.com/cssref/sel_firstletter.asp
#special::first-letter {
color: green;
font-size: 100px;
}
<p id="special">This is a paragraph</p>
I've had the same issue. The answer above is correct. For further information, read the following on https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
"21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect.
A pseudo-element is composed of two colons: ::
Target the First Letter of a Paragraph
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
This snippet is an abstraction that will find all paragraphs on the page, and then sub-target only the first letter of that element.
This is most often used to create newspaper-like styling for the first-letter of an article.
Target the First Line of a Paragraph
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Similarly, the ::first-line pseudo element will, as expected, style the first line of the element only."
If you want to select the first letter of the element with id, simply add a "#" in order to select it. It goes like this:
#insertnameofyouridhere::first-line {
color: blue;
font-size: 20px;
}
I just got done with my first proper web design (which was for my own site) and I've styled the first line and letter of the p tags for my articles and they work just fine, but the first letter and line of blockquotes also inherit that style and I'm simply not able to change it.
I have a feeling I'm missing something simple here. For instance, look at the blockquotes on this page.
I've tried explicitly styling the first line and letter of the blockquote but it does not seem to work. For what it's worth, I'm using first-of-type right now; I've also tried first-child but to no avail.
Update: Here's a jsfiddle --- http://bit.ly/1j70PCT
Either use the :not() pseudo class to prevent the blockquote element from being styled in the initial declaration:
.entry-content :not(blockquote) p:first-of-type:first-letter {
font-size: 2em;
}
..or overwrite the styling with a more specific selector:
.entry-content blockquote p:first-of-type:first-letter {
font-size: inherit;
}
blockquote > p:first-letter {
font-size: inherit;
}
I'm trying to add a dropcap in my Wordpress site, to the first letter of the first paragraph following the H1. I'm using a selector as follows:
h1 + p:first-letter {
font-family:Almendra;
font-size:300%;
etc...
}
Nothing is being selected. If I remove the h1 +, every paragraph's first letter is selected.
My page is here: http://www.thelionscall.com/2012/10/19/forum-testing/
What am I doing wrong?
The elements are too far apart. Need to either put them in the same parent, or use their containers... this might get you closer:
header h1 + div.entry-meta p:first-letter {
font-size: 300%;
/* etc... */
}