Styling will be applied to the first element that matches the CSS

I have a series of div sections with repeated paragraphs, and I am looking to apply specific CSS styles to only the first matching paragraph within each div.

div.example1 p.special~p.special {
  color: green;
}
<p>Top Paragraph</p>
<div class='top'>

  <div class="example1">
    <p class="special">This is paragraph 1 and it should be green and bold</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 2</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 3</p>
  </div>

</div>

Check out the source link -

htmlcssflexboxcss-selectors

Answer №1

The issue When using the second css selector, you are affecting all p tags that follow a p tag within a div with the example1 class.

The resolution Instead of targeting the first p tag, focus on the initial .example1 div by implementing the following:

.example1:first-of-type .special {
  color: green;
  font-weight: bold;
}
<p>Top Paragraph</p>
<div class='top'>

  <div class="example1">
    <p class="special">This is paragraph 1 and it should be green and bold</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 2</p>
  </div>

  <div class="example1">
    <p class="special">This is paragraph 3</p>
  </div>

</div>

Note Keep your css selectors concise and direct. Avoid unnecessary elements like div.class; opt for simply using .class instead.

Answer №2

If you want to specify which element in a group of siblings, you can use the :nth-child() pseudo class. Take a look at the :nth-child() Documentation for more information.

.example1:nth-child(1) .special {
  color: green; font-weight:bold;
}

Another option is to use :first-of-type to select the first element in the group. Check out the :first-of-type Documentation for details.

.example1:first-of-type .special {
  color: green; font-weight:bold;
}

Both of these selectors will accomplish the same result for your HTML snippet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript struggles when dealing with dynamically loaded tables

I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...

javascriptphpjqueryhtmlajax

Utilize PHP to extract data from a SQL database and dynamically create li elements within a ul container for every row retrieved

I am completely new to this and trying to figure things out. My main aim is to design a dropdown menu within my navigation bar that displays different themes, allowing users to change the color theme of the page by clicking on an element. I have organize ...

phphtmlcsssql

Neglecting Min within the <input> field

I am facing a challenge with knockout.js in an ASP.NET application where I need to restrict users from entering negative numbers in a specific input field. The code snippet that is causing the issue is: <input type="number" class="form-control" data-bi ...

htmlknockout.js

Adding a conditional to target a bootstrap modal in AngularJS

I am facing a situation where I need a modal to only appear when specific conditions defined in my controller are met, rather than every time a button is clicked. Here's the HTML CODE: <button class="btn btn-primary-outline" type="button" data-uk ...

javascripthtmlcssangularjstwitter-bootstrap

Checking a text input using JavaScript

Looking for some guidance on how to validate a textbox before calling PHP when clicking the SUBMIT button. Here is my code: <html> <head> <script> function myfunction(val) { var x=document.getEl ...

javascriptphphtml

Tips for decoding Dropbox Public folder images in HTML

Is there a way to read and display all images from a Dropbox public folder using jQuery loop? I have successfully displayed a single image like this: Simple Image "" But how can I access all images in the Dropbox public folder if their number is unknown ...

jqueryhtmldropbox

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

htmlcsstwitter-bootstrap

Tips for deactivating a text field once a selection drop-down option has been chosen

I have been searching for a while on the internet but I couldn't find what I was looking for. How can I disable a text field when a select drop down is selected with a value (not empty)? It would also be nice to toggle it. When there is no option se ...

javascriptjqueryhtmlcss

In what situations are forms preferable to standard div elements?

When might it be more appropriate to use <forms> instead of <div>? I personally have never used it, but I know others do. Could there be something valuable that the form element provides, beyond just the semantic aspect? ...

html

Using Javascript's document.write function to modify the content of a PHP page

Here is a Javascript function that capitalizes the first letter of a string: function capitalizeFL(string) { return string.charAt(0).toUpperCase() + string.slice(1); } In a file named statuswindow.php, there are PHP scripts that use this function to ...

phpjavascriptjqueryhtmlajax

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Ways to showcase information on websites using Myanmar/Burmese typeface

I manage a website catering to the Burmese community, with content in the Burmese language. However, I have encountered an issue where the text appears broken due to using Zawgyi format instead of Unicode format in Myanmar. How can I resolve this problem? ...

csshtmlunicodefontslocalization

Troubleshooting Issue with Post/Get Request in AJAX and Flask Framework

My current project involves building a YouTube scraper webpage purely for educational purposes. I have created a web page with a text box to enter search queries and a search button. When the button is clicked, an Ajax post request is sent with the text bo ...

pythonhtmlajaxflaskpost

Feeling anxious about the abundance of fields within the table

Currently in the process of planning my upcoming project, a text-based MMORPG game. I'm tackling the design of certain aspects of the database and have encountered a new challenge. One feature of the game involves allowing players to purchase cars and ...

phpmysqlhtmlsql

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Listen for a click event on an Unordered List using addEventListener

Struggling to transform a for loop that iterates through an unordered list of hyperlinks and adds an 'onclick' function to each into one using an event listener instead. Unfortunately, I have not been able to create a functional solution. Below ...

javascripthtml

Step-by-step guide to achieving a File div effect using CSS

Wondering how to achieve this specific effect within a div using CSS? click here for visual reference I attempted it using the before and after elements, but I struggle with these tags: check out this image for details Apologies if my question is unclear ...

css

Is it possible to generate various resolutions of an image simultaneously?

While trying to download wallpapers from a link on this website, I encountered an issue. Upon clicking the download button, a new page opened with the URL "https://images.wallpapersden.com/image/download/street-fighter-fortnite_bGtoaW6UmZqaraWkpJRmbmdlrW ...

javascripthtmljquerycssweb

What is the best way to align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

What could be causing my jQuery to not function on a separate domain?

Two of my websites have the same code, but one is functioning correctly while the other seems to be having trouble with the jQuery functions <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;char ...

javascriptjqueryhtmlcss