CSS: Targeting a particular instance of a specific element type within an HTML document

Question

CSS: Targeting a particular instance of a specific element type within an HTML document

My goal is to target specific occurrences of a certain type of element in CSS for styling purposes.

Consider the following example:

<span>Some random stuff</span>
<p>Occurrence 1 of p</p>
<ul>
<li>Random stuff</li>
<li>More random stuff</li>
</ul>
<p>Occourence 2 of p</p>
<span>Even more random stuff</span>

I aim to style Occurrence 1 and 2 of 'p' differently using an external CSS file. I understand that it may be simpler to use inline CSS, but my requirement is to achieve this externally. Additionally, while I could assign unique IDs or classes to each occurrence of 'p', I want to explore if there's another approach without resorting to that method.

html css

Answer 1

Answer №1

It appears that you are in need of the CSS pseudo-selector :nth-of-type, without the use of IDs or classes:

p:nth-of-type(2) {
  color: red;
}
li:nth-of-type(1) {
  color: blue;
}

<span>Some random stuff</span>
<p>Occurrence 1 of p</p>
<ul>
  <li>Random stuff</li>
  <li>More random stuff</li>
</ul>
<p>Occourence 2 of p</p>
<span>Even more random stuff</span>

I hope this information is helpful to you! :)

Answer 2

It appears that you are in need of the CSS pseudo-selector :nth-of-type, without the use of IDs or classes:

p:nth-of-type(2) {
  color: red;
}
li:nth-of-type(1) {
  color: blue;
}

<span>Some random stuff</span>
<p>Occurrence 1 of p</p>
<ul>
  <li>Random stuff</li>
  <li>More random stuff</li>
</ul>
<p>Occourence 2 of p</p>
<span>Even more random stuff</span>

I hope this information is helpful to you! :)

Answer 3

Answer №2

To uniquely style specific elements, consider using the :nth-of-type() selector.

p:nth-of-type(1) {
    /* Style */
}

p:nth-of-type(2) {
    /* Style */
}

If you prefer not to add an id, utilizing a class can help distinguish elements in your code.

Here is an example:

<span>Some text</span>
<p class="first">First paragraph</p>
<ul>
<li>List item</li>
<li>Another list item</li>
</ul>
<p class="second">Second paragraph</p>
<span>More text</span>

You can then target these classes in CSS like so:

.first {
    /* Styling for first element */
  }

  .second {
    /* Styling for second element */
  }

For styling the first occurrence of a <p> element, use p:first-of-type:

  p:first-of-type {
    /* Styling for the first <p> */
  }

Explore more selector options here.

Answer 4

To uniquely style specific elements, consider using the :nth-of-type() selector.

p:nth-of-type(1) {
    /* Style */
}

p:nth-of-type(2) {
    /* Style */
}

If you prefer not to add an id, utilizing a class can help distinguish elements in your code.

Here is an example:

<span>Some text</span>
<p class="first">First paragraph</p>
<ul>
<li>List item</li>
<li>Another list item</li>
</ul>
<p class="second">Second paragraph</p>
<span>More text</span>

You can then target these classes in CSS like so:

.first {
    /* Styling for first element */
  }

  .second {
    /* Styling for second element */
  }

For styling the first occurrence of a <p> element, use p:first-of-type:

  p:first-of-type {
    /* Styling for the first <p> */
  }

Explore more selector options here.

CSS: Targeting a particular instance of a specific element type within an HTML document

Answer №1

Answer №2

Similar questions

How can I upload a folder with subfolders and keep the structure intact?

I am curious about how to implement overflow:hidden along with position:sticky in React.js

The application of knockoutjs bindings is restricted to specific ids and cannot be used on any

Placing information on the opposite sides of a table cell

Regular expression for matching a CSS definition that includes a specific name and value

Contrasts in characteristics of CSS images versus SVG graphics

Different Div Sizes Based on Device Type (Bootstrap)

Having trouble with the move_uploaded_file function in PHP?

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

What is the best way to send user input text to a Vue method using v-on:change?

Applying a dual background effect with one background repeating from the center using CSS3

Every time I attempt to input text into the text area, the page automatically refreshes, preventing me from completing any entries

CSS reinitialization for the HTML5 button element

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

Could the Google Font "Exo 2" be causing the size issue with HTML Canvas 2DContext.font?

Navigating Through Siblings with Http Agility Pack

jsoup - locate element and delete it along with the element preceding it

Display a quote within an input field on a webpage using PHP

The new Facebook login button in my app seems to be glitchy as it fails to redirect users to the appropriate page after

Utilizing the NG-CLASS directive within a material table to target a specific 'row' element for styling in CSS