Target the 2nd instance of a CSS Class
There are two pseudo-selectors that accomplish what you're looking for.
.media-link:nth-child(2) {
// here style
}
or
.media-link:nth-of-type(2){
// here style
}
Selecting the second occurrence of a class with CSS?
You can use this with selectors level 3 to select those that aren't the first one :
.orange ~ .orange {
}
Demonstration
The best is to complete the style with a rule describing the other .orange
elements :
.orange, .orange ~ .orange ~ .orange {
}
Demonstration
CSS3 selector to find the 2nd div of the same class
UPDATE: This answer was originally written in 2008 when nth-of-type
support was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2)
, unless you have to support IE8 and older.
Original answer from 2008 follows (Note that I would not recommend this anymore!):
If you can use Prototype JS you can use this code to set some style values, or add another classname:
// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...
(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)
But if you're generating the html serverside you might just as well add an extra class on the second item...
Target specific instance of CSS class
With jQuery:
$("div.item:eq(2)").addClass("test");
Demo
Is there a way to individually target multiple CSS classes at once?
Use a comma.
.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
color: #fc9426;
}
Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.
It might look something like this:
[class^="nav-"] { margin: 1rem 0; padding: 0 1rem; min-height: 3rem; color: #333; font: 1rem/3rem Arial, sans-serif; border-bottom: 1px solid black;}
/** * Utility/Modifier style properties that * any nav could add to their base of styles. */.nav-branded { color: white; background-color: #fc643c;}.nav-branded:hover { background-color: hotpink;}
/** * These classes have styles specific to * each class (acts like an ID but * without the specificity). */.nav-1 { /* Waiting for some styles. */}.nav-2 { border-bottom-width: 4px;}.nav-3 { border-bottom-style: dashed;}
<nav class="nav-1 nav-branded">Nav One</nav><nav class="nav-2">Nav Two</nav><nav class="nav-3 nav-branded">Nav Three</nav>
Target a css class inside another css class
Not certain what the HTML looks like (that would help with answers). If it's
<div class="testimonials content">stuff</div>
then simply remove the space in your css. A la...
.testimonials.content { css here }
UPDATE:
Okay, after seeing HTML see if this works...
.testimonials .wrapper .content { css here }
or just
.testimonials .wrapper { css here }
or
.desc-container .wrapper { css here }
all 3 should work.
Related Topics
Remove or Add Class in Angular
Is Browser Prefix Still Required for Linear-Gradient
Regression Testing for Styling and Layout of Web Applications
How to Do Horizontal Scroll in Ionic 3
Creating a Fuzzy Border in CSS 3
How to Use The .Clearfix Class
Bootstrap Container with Position:Absolute Loses Layout Inside
How to Position a Dropdown at Cursor Position Inside a Textarea
What Is a Good CSS Cleanup Tool
CSS Background-Position Animate Right to Left
How to Select a Div with Class "A" But Not with Class "B"
Is There a Working Implementation of CSS3 Grid Layout for Webkit
Generate Random Color with Pure CSS (No JavaScript)
Lato' Font Rendering Odd in Safari, Not in Chrome, or Firefox