CSS Trick: Applying first-of-type selector to specific instances of a div

Question

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropcap while in others I do not.

Typically, I use the following approach:

.maintext { font, border, etc }
.maintext p:first-of-type:first-letter { css for the dropcap }

However, this results in every <div class='maintext'> triggering the appearance of the dropcap. How can I signify in the HTML when I want the dropcap to appear and when I don't, so as to adhere to DRY principles?

My standard HTML structure for this scenario is as follows:

<div class="maintext>
<p>some text</p>
<p>some text</p>
</div>

css css-selectors

Answer 1

Answer №1

Don't complicate things. Simply assign a class to your paragraph tags and use it wherever you need, regardless of the container.

p.dropCap:first-letter {
  font: bold 28px Georgia;
}

If you only want the first paragraph of .contentText to have a drop cap, follow these steps:

.contentText p:first-child:first-letter {
  font: bold 28px Georgia;
}

Alternatively, you can also utilize :first-line if you prefer to style the entire first line.

Answer 2

Don't complicate things. Simply assign a class to your paragraph tags and use it wherever you need, regardless of the container.

p.dropCap:first-letter {
  font: bold 28px Georgia;
}

If you only want the first paragraph of .contentText to have a drop cap, follow these steps:

.contentText p:first-child:first-letter {
  font: bold 28px Georgia;
}

Alternatively, you can also utilize :first-line if you prefer to style the entire first line.

Answer 3

Answer №2

@Nimsrules provided the accurate answer. I will simply include it here in case you prefer an alternative method.

.maintext { font, border, etc }
.maintext p:not(.nodropcap):first-of-type:first-letter { css for the dropcap }

Here is the HTML code:

<div class="maintext>
    <p class="nodropcap">some text</p>
    <p>some text</p>
</div>

Answer 4

@Nimsrules provided the accurate answer. I will simply include it here in case you prefer an alternative method.

.maintext { font, border, etc }
.maintext p:not(.nodropcap):first-of-type:first-letter { css for the dropcap }

Here is the HTML code:

<div class="maintext>
    <p class="nodropcap">some text</p>
    <p>some text</p>
</div>

CSS Trick: Applying first-of-type selector to specific instances of a div

Answer №1

Answer №2

Similar questions

Arrange the inline-block elements at the bottom of a div

Position the SVG next to the link text in a Bootstrap navbar brand

Protecting against overflow for text inside a container that changes when hovered over

Maintain the default material-ui class styles while making customizations to override others

Update the styling for the second list item within a specified unordered list class instantaneously

Angular Fragmentary Perspective

Is it possible for an SVG to derive its dimensions from the containing element?

Tips for automatically closing a dropdown menu when it loses focus

Encircling the icon with a circle

Embracing Elegance with jQuery

What is the best way to emphasize a div depending on a query outcome?

Show basic HTML elements on a single page of an Angular Material web application

Arrangement of cards in a column

Tips for avoiding word wrapping in text with white spaces

The HTML Style for implementing HighChart title text does not work when exporting files

Navigate through the items in my subnavbar by scrolling the content

Using CSS height 100% does not function properly when the content overflows

How to position slides in the center using react-slick

Adjust the size and position of the text input field

What is the best way to retain data after clicking a button?