CSS :first-letter Not Working


Answer :

::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.


p::first-letter {font-size: 500px;}

or if you want a ::first-letter selector in a span then write it like this:


p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN provides the rationale for this non-obvious behaviour:



The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.


...


A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.



Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen


Examples



  • http://jsfiddle.net/sandeep/KvGr2/9/

  • http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/


References


https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
http://reference.sitepoint.com/css/pseudoelement-firstletter



You can get the intended behavior by setting the span's display property to inline-block:





.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>





This is because :first-letter only operates on block / inline-block elements. SPAN is an inline element.



Taken from http://reference.sitepoint.com/css/pseudoelement-firstletter:




The :first-letter pseudo-element is mainly used for creating common
typographical effects like drop caps. This pseudo-element represents
the first character of the first formatted line of text in a
block-level element, an inline block, a table caption, a table cell,
or a list item.




Comments

Post a Comment

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

Answer : Solution 1: When configured with two or more hostnames, the correct virtual host name and username must both be sent in the username by the ftp client. Separate the site name and user with the vertical line symbol: | www.example.com|MyUser So, in your FTP Client use this for the username: ftp.telefonievergelijken.nl|tv_ftp Solution 2: It appears that you're attempting to connect to the FTP site using a hostname which is not currently configured in any of the bindings to the FTP site within IIS. I base this only on the error output from Filezilla which you have included, as you have censored the hostname (even in example form) from the output, so there isn't much more to go on. You'll need to configure a binding on the FTP site which matches the hostname you are using to connect to the FTP site (whether that be from Filezilla or any other FTP client). EDIT: From your updated post information, I notice that your bindings for the FTP site are indeed in...
Read more

C Perror Example

Defined in header <stdio.h> void perror ( const char * s ) ; Prints a textual description of the error code currently stored in the system variable errno to stderr . The description is formed by concatenating the following components: the contents of the null-terminated byte string pointed to by s , followed by ": " (unless s is a null pointer or the character pointed to by s is the null character) implementation-defined error message string describing the error code stored in errno , followed by '\n' . The error message string is identical to the result of strerror ( errno ) . Parameters s - pointer to a null-terminated string with explanatory message Return value (none). Example # include <stdio.h> int main ( void ) { FILE * f = fopen ( "non_existent" , "r" ) ; if ( f == NULL ) { perror ( "fopen() failed" ) ; } else { fclose...
Read more