Ufdjrw

How do I get the green key off the shelf in the Dobby level of Lego Harry Potter 2?

Does it take more energy to get to Venus or to Mars?

Why do remote companies require working in the US?

How to count occurrences of text in a file?

Term for the "extreme-extension" version of a straw man fallacy?

What is the purpose of the Evocation wizard's Potent Cantrip feature?

Solution of this Diophantine Equation

Does the Brexit deal have to be agreed by both Houses?

Why didn't Khan get resurrected in the Genesis Explosion?

When did Lisp start using symbols for arithmetic?

The King's new dress

Science fiction novels about a solar system spanning civilisation where people change their bodies at will

How to make a variable always equal to the result of some calculations?

Grabbing quick drinks

Unreliable Magic - Is it worth it?

Why doesn't a table tennis ball float on the surface? How do we calculate buoyancy here?

What is the point of a new vote on May's deal when the indicative votes suggest she will not win?

Visit to the USA with ESTA approved before trip to Iran

Are there languages with no euphemisms?

Whats the best way to handle refactoring a big file?

Customer Requests (Sometimes) Drive Me Bonkers!

How to safely derail a train during transit?

Example of a Mathematician/Physicist whose Other Publications during their PhD eclipsed their PhD Thesis

If I blow insulation everywhere in my attic except the door trap, will heat escape through it?

Capitalize first letter of an inline element's text

0

I read elsewhere that the following should capitalize the first letter of the text of an inline element (e.g. a <span>).

However, if you run the code snippet you'll see that it doesn't work. If I replace the <span> with a <div> it works, but is there a way to capitalize the first letter without changing the element type?

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

html css

share|improve this question

asked Mar 7 at 14:09

DónalDónal

123k156486751

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ::first-letter "The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element" Source . The answer you referenced has a comment --> "Keep in mind that .qcont has to be a block."
  
  – Ramiz Wachtler
  Mar 7 at 14:13
  
  

  
  
  
  

add a comment | 

0

I read elsewhere that the following should capitalize the first letter of the text of an inline element (e.g. a <span>).

However, if you run the code snippet you'll see that it doesn't work. If I replace the <span> with a <div> it works, but is there a way to capitalize the first letter without changing the element type?

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

html css

share|improve this question

asked Mar 7 at 14:09

DónalDónal

123k156486751

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ::first-letter "The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element" Source . The answer you referenced has a comment --> "Keep in mind that .qcont has to be a block."
  
  – Ramiz Wachtler
  Mar 7 at 14:13
  
  

  
  
  
  

add a comment | 

I read elsewhere that the following should capitalize the first letter of the text of an inline element (e.g. a <span>).

However, if you run the code snippet you'll see that it doesn't work. If I replace the <span> with a <div> it works, but is there a way to capitalize the first letter without changing the element type?

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

html css

share|improve this question

asked Mar 7 at 14:09

DónalDónal

123k156486751

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize:first-letter 
 text-transform: capitalize;
 display: inline-block;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this question

asked Mar 7 at 14:09

DónalDónal

123k156486751

share|improve this question

asked Mar 7 at 14:09

DónalDónal

123k156486751

asked Mar 7 at 14:09

DónalDónal

123k156486751

asked Mar 7 at 14:09

DónalDónal

123k156486751

3 Answers
3

active

oldest

votes

3

The pseudo element ::first-letter only works if the parent element is a block element, so the span must be inline-block:

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

edited Mar 7 at 14:22

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  While this is the correct answer, please use the new format ::first-letter with two ::
  
  – Mattia Astorino
  Mar 7 at 14:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MattiaAstorino done.
  
  – Mr Geek
  Mar 7 at 14:23
  

  
  
  
  

add a comment | 

2

Span has not default display, so you have to set it to block or something else

And it's not correct to set display property of first-letter, you should do it for entire class

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

answered Mar 7 at 14:19

pavelberepavelbere

439110

add a comment | 

-1

You need to make the span itself display: inline-block - not the ::first-letter pseudo element.

.list .capitalize 
 display: inline-block;

share|improve this answer

answered Mar 7 at 14:13

04FS04FS

1,3241314

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045789%2fcapitalize-first-letter-of-an-inline-elements-text%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

The pseudo element ::first-letter only works if the parent element is a block element, so the span must be inline-block:

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

edited Mar 7 at 14:22

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  While this is the correct answer, please use the new format ::first-letter with two ::
  
  – Mattia Astorino
  Mar 7 at 14:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MattiaAstorino done.
  
  – Mr Geek
  Mar 7 at 14:23
  

  
  
  
  

add a comment | 

3

The pseudo element ::first-letter only works if the parent element is a block element, so the span must be inline-block:

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

edited Mar 7 at 14:22

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  While this is the correct answer, please use the new format ::first-letter with two ::
  
  – Mattia Astorino
  Mar 7 at 14:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MattiaAstorino done.
  
  – Mr Geek
  Mar 7 at 14:23
  

  
  
  
  

add a comment | 

The pseudo element ::first-letter only works if the parent element is a block element, so the span must be inline-block:

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

edited Mar 7 at 14:22

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize 
 display: inline-block;

.list .capitalize::first-letter 
 /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

edited Mar 7 at 14:22

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

answered Mar 7 at 14:16

Mr GeekMr Geek

7,68221336

2

Span has not default display, so you have to set it to block or something else

And it's not correct to set display property of first-letter, you should do it for entire class

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

answered Mar 7 at 14:19

pavelberepavelbere

439110

add a comment | 

2

Span has not default display, so you have to set it to block or something else

And it's not correct to set display property of first-letter, you should do it for entire class

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

answered Mar 7 at 14:19

pavelberepavelbere

439110

add a comment | 

Span has not default display, so you have to set it to block or something else

And it's not correct to set display property of first-letter, you should do it for entire class

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

answered Mar 7 at 14:19

pavelberepavelbere

439110

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

.list .capitalize
 display: block;

.list .capitalize::first-letter 
 text-transform: uppercase;

<div class="list">
 <span class="capitalize">capitalize me</span>
</div>

share|improve this answer

answered Mar 7 at 14:19

pavelberepavelbere

439110

answered Mar 7 at 14:19

pavelberepavelbere

439110

answered Mar 7 at 14:19

pavelberepavelbere

439110

-1

You need to make the span itself display: inline-block - not the ::first-letter pseudo element.

.list .capitalize 
 display: inline-block;

share|improve this answer

answered Mar 7 at 14:13

04FS04FS

1,3241314

add a comment | 

-1

You need to make the span itself display: inline-block - not the ::first-letter pseudo element.

.list .capitalize 
 display: inline-block;

share|improve this answer

answered Mar 7 at 14:13

04FS04FS

1,3241314

add a comment | 

You need to make the span itself display: inline-block - not the ::first-letter pseudo element.

.list .capitalize 
 display: inline-block;

share|improve this answer

answered Mar 7 at 14:13

04FS04FS

1,3241314

.list .capitalize 
 display: inline-block;

share|improve this answer

answered Mar 7 at 14:13

04FS04FS

1,3241314

answered Mar 7 at 14:13

04FS04FS

1,3241314

answered Mar 7 at 14:13

04FS04FS

1,3241314