"Utilizing CSS Selectors to Target Multiple Classes at Once

Imagine having a rule like this:

.classA, .classB, li, .classC :nth-child(2) {
    margin-top: 5px;
}

This rule will be applied to all the specified classes and elements. But what if you want to exclude the first element that matches the rule? For instance, if you have:

<div class="classA"></div>
<div class="classB"></div>
<div class="classC">
    <ol>
        <li></li>
        <li></li>
    </ol>
</div>

You would want the rule to only affect class B and the two list items, excluding class A (first matching element) and ol (not in the specified types). Is there a way to apply the not:first-child selector to a list of classes instead of just one?

For example:

<div class="classB"></div>
<div class="notInList"></div>
<div class="classA"></div>

In this case, the rule should only be applied to the third div, class A, excluding the first (as it's the first match) and the second div (not included in the list).

htmlcss

Answer №1

Is it possible to target multiple classes with the not:first-child selector instead of just one?

Unfortunately, no.

The workaround is to assign a shared class to all elements in the group:

div {
    height: 50px;
    width: 50px;
    margin: 2px;
}
.classA, .classB, .classC {
    background-color: blue;
}
.fun-times:not(:first-child) { 
    background-color: red;
}
<div class="classA fun-times"></div>
<div class="classB fun-times"></div>
<div class="classC fun-times"></div>

Answer №2

This might be the solution

div:not(:first-child) { 
   background-color: blue
}

Answer №3

To target the initial element within a list, it is necessary to refer to the parent element:

.collection > :not(:first-child) {
     background-color: aqua;
 }

<div class="collection">
    <div class="classB">a</div>
    <div class="notInList">b</div>
    <div class="classA">c</div>
</div>

If your goal is specifically aimed at selecting the first element in a div regardless of its classes or types like span or div, you can achieve that by using the > operator which targets only immediate children. You can utilize the wildcard pseudo elements as shown below:

.collection > :first-child {
     background-color: aqua;
}

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

Having trouble triggering the onclick event on a dynamically created table using JavaScript

I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to mod ...

javascriptjqueryhtml

Avoid Having ASP.NET Properties Display as Attributes in Custom Controls

After creating a custom ASP.NET Control that acts as a container with a specified wrapping tag, I encountered an issue: class Section : System.Web.UI.HtmlControls.HtmlGenericControl { public string WrapperTag // Simple interface to base-class TagName ...

c#.netasp.nethtml

AngularJS enables tab highlighting by responding to button selections

In my application, there are 3 tabs set up as follows: <li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits') ...

htmlcssangularjs

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

Sending a basic API request with HTTP and JSON data being passed as empty

I am struggling to successfully make a basic API request. The instructions provided for the request are as follows: POST https://api.yotpo.com/oauth/token -------------------------------------- { "client_id": "### Your client_id ###", "client_secret ...

javascripthtmljsonhttp

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

htmlcss

Tips for using CSS in React to keep a component fixed at the bottom until the user reaches the footer

Working on a project with React and CSS in JS using Emotion. I am facing an issue where I need a button to stick at the bottom of the viewport on mobile, until the user scrolls to the footer. Once they reach the footer, the button should then be fixed at t ...

cssreactjsmaterial-ui

Measuring the quantity of 'table' elements with jQuery

This HTML code below defines a table structure. Now tables can be dynamically added to this structure. <div class="tableStyle myWebsiteTable"> <table cellspacing="0" cellpadding="0" id="site0" class="site active"> <thead> ...

javascriptjqueryhtmlcssjquery-plugins

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

htmlangularbuttonaudio

What is the best way to remove an active class by clicking in my specific situation?

I was working on creating a gallery of Unsplash images that would display a full-screen image when the user clicked on a small image. I implemented a modal window that should appear when the user clicks on the small image, and I wanted it to close when the ...

javascriptcssreactjsonclickmodal-dialog

Angular 5 form validation - validating user inputs

I am currently developing a MEAN stack application and working on implementing form validation. Everything seems to be functioning correctly except for the paragraph tag containing the error message, which is not displaying properly. Additionally, I want a ...

htmlvalidationtypescriptmean

Adding choices to a dropdown menu

This issue is connected to the question about Adding options to a <select> using jQuery?, but it focuses on a different aspect. The problem I'm facing is the inability to add option elements to a select in IE8. Interestingly, when switching the ...

javascriptjqueryhtmlinternet-explorer-8

Tips for shrinking a sticky header when scrolling using Angular and JavaScript

Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality. How can I adjust the display of the lower half of the header to show no text when the user s ...

javascripthtmlcssangularsticky-footer

Using CSS to repeat an image

Is there a way to set cap insets when defining the background-image repeat? I need the image to repeat without borders. Can CSS allow for tiling or stretching the middle of the image? The first rounded rectangle represents my PNG image with defined cap in ...

htmlcss

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...

jquerycsscss-transforms

Utilize Flexbox to create a layout with 3 divs, organized into two columns where one column

I am attempting to transform <div></div> <div></div> <div></div> Three consecutive divs into the following format. Div 1 is red, div 2 is green, and div 3 is blue. I have achieved this using floats, like so: .div1 { ...

htmlcssflexbox

Angularjs ng-class directive: remove a class when a different condition becomes true

The question may not be crystal clear, but I am struggling to come up with a better way to phrase it. My goal is to emphasize a table row using ng-class and conditions. Here's the snippet of code I'm currently working with: <tr ng-class="{sel ...

javascriptcssangularjs

The rendering of the font appears distinct when viewed on an iPad compared to when displayed

Visit this website. The menu displays correctly on desktop, but on iPads, the font appears larger leading to a line break. Is it because the selected font isn't loading and defaulting to Times New Roman instead? It seems likely since I experience the ...

htmlcssfonts

Regex: Identifying all URLs except for those with ".js" or ".css" included

I am currently working on a project where I need to change all the links in an HTML page so that they are not clickable. However, I am having trouble finding the right Regex pattern for the following condition: href="Any_URL" except for those that contain ...

phphtmlcssregex