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

What causes the variation in the appearance of the navigation bar across different pages?

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Converting units to rem dynamically in CSS: a comprehensive guide

Disabling the visibility of elements through a transparent sticky-top menu

What is the best way to maximize the size of an image without causing the parent div to expand in height?

Tips for setting a uniform width for all bars in apexcharts bar column width

multiple elements sharing identical CSS styling

What is the best way to design an element that exceeds the size of my physical body

Issues with CSS transitions not functioning properly following the use of toggleClass()

Finding the initial channel points icon on twitch.tv/esl_csgo through Selenium and Python

Guide to positioning a button on top of another button using Vuetify

What is the best way to find an element using either 'className1' or 'className2'?

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

In CSS, there are two dynamic fields with adjustable widths, each occupying half of the total length

What is the best way to achieve a consistent style for two tables?

basic two-column design

Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

Using WebDriver Selenium to choose an element within a table following another element

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)