The HTML:
<span class="foo">Hello</span>
I want the CSS class "foo" to be defined as follows: the first letter of the enclosed content is red, and the rest of the characters are green. Is this possible?
EDIT:
What if I want something like the opposite? I want the first letter to be EXCLUDED from any styling (except any parent styling), and all the rest of the letters to be green.
Use the first-letter pseudo selector:
.foo { color: green; display: inline-block; }
.foo:first-letter { color: red; }
Here's the fiddle: http://jsfiddle.net/ZLapy/
Note: the :first-letter selector will not work on an inline element.
You have to use either block, inline-block or table.
Yes, :first-letter pseudo selector.
span.foo:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Yes, you can use the first-letter pseudo element to do this.
Example:
.foo{ color: red; }
and
.foo:first-letter{ color:green; }
The first-letter pseudo element (hence the name) will change the property of the first letter in the span.
You can read more on how to do this # http://www.w3schools.com/cssref/sel_firstletter.asp
EDIT:
If you want to do the opposite, and have the first letter be excluded from the style, the easiest way would be to exclude the first letter from the span entirely. You could also change the color of the first letter to the color of the rest of the text on the page (default color) .
Related
How to set up hover effect for all elements with only one declaration?
Example:
#element1: hover, #element2:hover, #element3:hover, #element4:hover {
background: color
}
I want to say :hover only one time.
How to use a shorter way?
You could instead just give a class to all of the elements that you want to have the hover effect.
After that, you would only need one css call:
.myHoverClass:hover {
/* My code here */
}
*:hover { color: red; }
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
You can but it's not recommended as it can lead to some odd cascade or specificity issues.
Use the universal selector
*:hover {
your styles here
}
I've a logo text in anchor tag and the Text logo to have the first letter of ever word red.
FLETCHER ROBBE INTERNATIONAL LLP
Like below image:
I've used span but it doesn't seem working in my scenario. Can some one point me to some CSS approach? Thanks
Working JSFIDDLE
This is the best you can do for inline elements in pure HTML + CSS:
<a class = "name" href="http://frobbeintl.com" title="">
<span>F</span>letcher
<span>R</span>obbe
<span>I</span>nternational
<span>LLP</span<
</a>
CSS:
.name {
text-transform: uppercase;
}
.name span {
color: red;
}
You could use the ::first-letter selector, as in CSS-Tricks. <- only for block elements
Although you can use this property
a::first-letter {
color: red;
}
But note this would be applied to the very first word in the Hyperlink, not in the word.
Here is a document for this http://css-tricks.com/almanac/selectors/f/first-letter/
You could change your code to the following:
<span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span>
Having that you can style the spans differently. From a markup standpoint that's fine because span has no meaning.
Using this technique and ids/nth-child you can even go as far as styling every letter differently.
As you see this gets ugly very quickly - so someone created a little jQuery plugin to do it for you: http://letteringjs.com/
Hope that helps.
I have this HTML:
<h2 class="first second">Red</h2>
<h2 class="second">Blue</h2>
<h2 class="first">Green</h2>
How can I select h2 with first and second class?
thanks about answers
Update:
If I have another h2 tag like this:
<h2 class="first second third">Default</h2>
it will be red with h2.first.second selector. Is there any way to select only element with first and second classes, not more.
Simply:
h2.first.second {
color: red;
}
This selects the h2 element with both classes "first" and "second". Refer to the CSS Selectors Level 3 W3 recommendation for more info.
JSFiddle demo.
If you are trying to select h2 with first and second class simutaneously
h2.first.second
I have created a working CodePen example of the solution.
h2.first.second {
/* styles go here*/
}
To select elements that have multiple classes simple use this:
h2.first.second
Note that there is no space between the classes, as apposed to the following which would select elements with the class of second which are inside a h2 element with the class of first
h2.first .second
You can select
.first.second {}
if you want only the first h2 to be selected. Make sure there is no space!
The following rule matches any h2 element whose class attribute has been assigned a list of whitespace-separated values that includes both "first" and "second":
h2.first.second { color: red }
Reference
But, to select an element whose class attribute exactly equal "first" and "second" I used this rule:
h2[class="first second"], h2[class="second first"] { color: red }
JsFiddle demo.
I have a page generated by WordPress which HTML looks similar to the HTML below. I would like to the first-letter of my div to have a different size, but when I try to add style for p:first-letter, all p's change sizes. My problem is I can't remove the p-tags because these are automatically created.
<div class="div">
<p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
<p>Paragraph 2</p>
<blockquote><p>Text blockquote</p></blockquote>
</div>
Any suggestions?
http://jsfiddle.net/hdNDh/
Use the CSS child selector >.
E > F - Matches any F element that is a child of an element E.
jsFiddle
.div > p:first-letter {
font-size:40px;
}
Edit: It seems I misunderstood your question at first, if you need the first letter of the div only, simply set the pseudo-class on the div instead of on the p.
jsFiddle
.div:first-letter {
font-size:40px;
}
Edit2: As mentioned in the comments below, for this to work in FF you need:
.div > p:first-child:first-letter {
font-size:40px;
}
jsFiddle
This seems strange/weird behaviour, so I have had a bit of a look around and it seems that Firefox is more particular about the :first-letter pseudo-class than other browsers. One example is that it doesn't count special characters to be letters, and therefore won't apply styles to them.
Results from testing a little bit just now: Firefox doesn't count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (even when there is no preceding text), whereas Chrome does count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (when there is no preceding text).
You need a combination of selectors:
http://jsfiddle.net/hdNDh/5/
.div > p:first-child:first-letter {
font-size:40px;
}
You can use:
.div > p:first-child::first-letter {
font-size: 24px;
}
http://jsfiddle.net/hdNDh/2/
I am trying to change the font for the whole page in HTML. By whole I mean everything: buttons, forms, etc. Is there a way to do this in CSS?
html {
color: green;
}
This would make the text green, but not the text of buttons.
Well, there's universal selector:
* {
color: green;
}
Take note, though, that specificity of this selector is the lowest (MDN).
Wild card selector
* {
color: green;
}
It may be the case that you need to over ride inline CSS and javascript generated CSS. In this case use !important as well
* {
color: green !important;
}
Use the * universal CSS selector.
The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector.
The selector div * will match the following em elements:
"Universal" in the h1 element ( matches the <h1> )
"emphasize" in the p element ( matches the <p> )
"not” in the first li element (matches the <ul> or the <li>)
"type” in the second li element (matches the <ul> or the <li>)
Example:
This rule set will be applied to every element in a document:
* {
color: green;
}
Also to add, it's compatible with most browsers, although it can be buggy in Internet Explorer 5.5, 6.0, 7.0.
If you don't need to support IE < 8, and want something that's less smelly, set an explicit color only on html and force everything else to inherit the color. Colors are already inherited by default on most elements, but not all of them.
Since this means applying two different color declarations, you will need two separate rules:
html {
color: green;
}
body * {
color: inherit !important;
}
Honestly, you shouldn't rely on a wildcard selector for doing this. You should take advantage of CSS's native inheritance. The best thing to do would be to remove the specific color declarations from your stylesheet (as needed) and add the color to your body or html tag. Using a wildcard is similar to this, except you are declaring that every single element should have the CSS as apposed to the native inheritance.