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>
Related
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 am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:
http://jsfiddle.net/whoiskb/Za2TB/
HTML
<div class="teaser">
<h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>
CSS (plus an external link to twitter bootstrap)
div.teaser h1.teaserText {
font-size: 100px;
font-weight: 100;
color: black;
line-height: 90px;
font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
text-transform: uppercase;
}
div.teaser h1.teaserText label {
color: #FCCE00;
}
From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.
Could someone explain what I am missing here?
BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.
Specificity rules only apply if different Rules target the **same element (as for your color of the label), not if different elements are targeted (even if some styles of that element would be inherited).
You have one stylerule applied to labels, and that is the color, which gets applied correctly. All your other styles are applied to another element, so the TB styles targeting the label directly are preferred of course.
Some styles are inherited (like font-size and line-height in your example), but they are overridden as soon as there is a rule targeting your element directly. TB overrides your font-size and line-height with the following rule:
label, input, button, select, textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
You could fix this easily by declaring:
div.teaser h1.teaserText label {
color: #FCCE00;
font-size:inherit;
line-height:inherit;
/* and so on */
}
I'm not exactly clear on what you think the problem is, but taking a guess:
CSS specificity decides what happens when there are two or more rules for one CSS property for a given element.
So, given this HTML:
<label class="myLabel">Hello!</label>
And this CSS:
label {
color: red;
font-size: 24px;
}
.myLabel {
color: blue;
}
The label will be blue, because .myLabel is a more specific selector than label.
However, the label will also have a font size of 24 pixels, because the .myLabel block doesn't include a rule setting the font-size property.
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... */
}
Can someone explain the difference for these two CSS selectors?
.work-container . h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
What is the extra dot in the upper definition?
.work-container h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
Cases
Selector start with dot
.class_name signifies class name
Two dotted selector separated by space
.outside .inside
means element with .inside class descended from an element with class .outside
Two dotted selector without separation
.name1.name2
means element that has both class name1 and name2
eg: class="name1 name2"
Related questions:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.
If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).
Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.
. in CSS means it is a class and it can be applied to many elements.
# in CSS means it is an ID and it can be applied to one element per page.
Without the either, it is a tag, targets all the elements with the tag name.
In your syntax, .work-container . h3 is actually error. The . should have been either , or as BoltClock said, >, which says the direct descendant operator in CSS.
. says its class
# means its an id
and if there is nothing but the selector, then it is a tag
. in CSS means it is a class & it can be applied to many elements with use space between classes
For example:
<h3 class="class1 class2 class2">Heading</h3>
# in CSS means it is an ID and it can be applied to one element per page.
For example
<h3 id="idname1">Heading</h3>
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;
}