Menu
p{display:inline;...}
<p>Hello</p>
p::first-letter{color: red;}
I want to use ::first-letter on that p.But it's a inline element, accroding to W3C, it doesn't work. How to do?
634
::first-letter The pseudo element only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
::first-letter does not work on inline elements such as a span . ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block . Therefore it's better to apply ::first-letter to a p instead of a span .
The ::first-letter selector is used to add a style to the first letter of the specified selector. Note: The following properties can be used with ::first-letter: font properties. color properties.
The :first-letter as defined in the spec http://www.w3.org/TR/CSS2/selector.html#first-letter only applies to a block element.
If you want you could use display:inline-block to make it work. Refer to http://jsfiddle.net/fZGFH/1/
109
you can give display:inline-block; to your p tag
Using the css display:block; and display:inline;, we can change the property of the element from block to inline or from inline to block as well....
Here is the code how you can do that
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
p {
background:red;
display:inline-block;
}
p:first-letter
{
color:black;
font-size:50px;
}
</style>
</head>
<body>
<p>CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents. A basic CSS document is made out of rule sets. Each rule set starts with a selector, a pattern that matches elements in an HTML or XML document. The selector is followed by a block of ...</p>
</body>
</html>
demo:- http://jsbin.com/eponir/4/edit
25
Here is the style for inline and first-letter case:
p{display:inline-block;}
p:first-letter {color:red}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
