CSS Selector: First Paragraph's First Letter Inside a Div

css selector: first paragraph's first letter inside a div

div p:first-of-type:first-letter { font-weight: bold; }

How to use a CSS :first-letter pseudo-element in a div paragraph

Try this: div.homepara:first-letter. When you want to address a div with a class add a . between then.

Example

How to apply CSS to the first letter after :before content?

In case you can not edit the HTML without JavaScript for example, you can use pure CSS so long as you are styling the :before or :after content of a "block-level" element.

p:before {
  content: 'Wisdom'
}

p:first-letter {
  font-size: 7vw;
}

<p></p>

Nested first-of-type and first-letter

Just use:

.post_content:first-letter{
  font-size:34px;
  color: red;
}

The complex query was not working because :first-letter applies the style on the first letter from the selector.

Issue with CSS :first-of-type :first-letter

This is working as intended as the :first-of-type selector actually selects the first of a specific type of element (section, div, span etc.) and doesn't actually select the first of a type of a class.

Alternatives

The '~' Fix

The tilde '~' workaround mentioned here.

/* Targets all paragraphs */
p 
{
        display: block;
        clear: both;
}

/* Targets all paragraphs within divs in #review */
#review div p
{ 
        padding-top:10px;
}

/* Targets the first letter within each paragraph */
#review div p:first-letter{
        float: left;
        line-height:90%;
        padding-right: 15px;
        padding-bottom: 10px;
        font-family: "Georgia",_serif;
        font-weight: bold;
        font-size: 60px;
        color:black;
}    

/* Removes the padding from all except the first paragraphs */
#review > div ~ div > p ~ p, 
#review > .content_left ~ .content_left p:first-of-type 
{
        padding-top: 0px;  
}

/* Removes the first letter stylings of the non-first paragraphs within 
   .content_left classes */
#review > .content_left ~ .content_left p:first-of-type:first-letter, 
#review > div ~ div > p ~ p:first-letter 
{
        float: none;
        line-height:90%;
        padding-right: 0px;
        padding-bottom: 0px;
        font-family: "Georgia",_serif;
        font-weight: normal;
        font-size: 12px; 
}

Example using '~' Method

(Thanks to BoltClock, for helping me along with this and it is his method after-all.)

---

Switching div Order

Moving the .content_right div behind the .content_left sections, as they are floats and you could still maintain the same layout.

Code:

<section id="review">
    <div class="content_left">
        <p>text</p>
        <p>text</p>
     </div>
     <div class="content_left">
        <p>text</p>
        <p>text</p>
     </div>
     <div class="content_right"></div>
</section>​ 

Example of switching order:

---

Using the :nth-of-type selector

Using the :nth-of-type selector to select the proper div.

Code:

#review .content_left:nth-of-type(2) :first-child
{
    padding-top:10px;
}

#review .content_left:nth-of-type(2) :first-child:first-letter
{
    float: left;
    line-height:90%;
    padding-right: 15px;
    padding-bottom: 10px;
    font-family: "Georgia",_serif;
    font-weight: bold;
    font-size: 60px;
    color:black;
}  

Example using :nth-of-type

Apply Style for first letter in paragraph only using CSS

Here you are

p::first-letter
{ 
text-transform: uppercase;
font-size: 25px; /* Change this to your choice */
}

target first letter of each word in css

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>

Aligning the first letter of a paragraph with CSS ::first-letter Selector

what's your html markup like?
if it's just a simple

tag, this might help you

The html

p:first-child:first-letter {
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

<p> a sentence for your site </p>

---

Related Topics