how can i select first second or third element with given class name using CSS?

Posted by Tumharyyaaden on Stack Overflow See other posts from Stack Overflow or by Tumharyyaaden
Published on 2010-05-01T18:40:05Z Indexed on 2010/05/01 18:47 UTC
Read the original article Hit count: 442

Filed under:

css-selectors

|

class

|

pseudo-class

|

pseudo-selector

|

pseudo-element

ie. i have the following:

<div class="myclass">my text1</div>
some other code+containers...

<div class="myclass">my text2</div>
some other code+containers...

<div class="myclass">my text3</div>
some other code+containers...

i have the css class div.myclass {doing things} that applies to all obviously but i also wanted to be able to select the first, second or third like this:

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

almost like the jQuery index selection .eq( index ) which is what i am using currently but need a noscript alternative. Thanks in advance!

© Stack Overflow or respective owner

Related posts about css-selectors

Change parent class of dom object via css selectors

as seen on Stack Overflow - Search for 'Stack Overflow'
Can i change parent class of some dom object on hover event via CSS selectors? For example I have such block: <span class="wBlock" > <span class="wText">Text</span> <span class="wLink"/> <\/span> and if i move mouse to span "wLink" span "wBlock" must be changed… >>> More
Are CSS selectors a big performance hit?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have a web application with bunch of HTML code. There are some style-attributes that I can't get rid of, but I was wondering if it's worth the cleanness to get rid of class-names and use CSS selectors instead. Do CSS selectors perform slowly? >>> More
Using JavaScript/jQuery to return a list of CSS selectors based on highlighted text

as seen on Stack Overflow - Search for 'Stack Overflow'
I've been given some project requirements that involve (ideally) returning a list of CSS selectors based on highlighted text. In other words, a user could do something like this on a page: Click a button to indicate that their next text selection should be recorded. Highlight some text on the page… >>> More
CSS Selectors (>, ., #)

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, What's the point using this syntax div.card > div.name What's the difference between this div.card div.name Thank you! >>> More
tool to remove repeated css selectors

as seen on Stack Overflow - Search for 'Stack Overflow'
I have 3 stylesheets that I have copied and pasted all into 1. As such, there are identical/repeated selectors. Is there an effective tool I can use to remove all repeated selectors if the style properties are identical? Another requirement is if the repeated selector exists once within a group… >>> More

Related posts about class

DIV is picking max-width value as width value for DIV.

as seen on Stack Overflow - Search for 'Stack Overflow'
I am facing a problem after applying max-width hack for IE7. In mozilla, width of the div is flexible and adjustable as per the image width in the div. But in IE7 it is taking the max-width as width of DIV. Below is my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"… >>> More
Getting Information About Class Programatically (methods in class/properties of class)

as seen on C# Corner - Search for 'C# Corner'
This article will teach you how to get information about some class like how many methods are there in class, how many properties are there etc.. >>> More
Nested class - calling the nested class from the parent class

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a class whereby a method calls a nested class. I want to access the parent class properties from within the nested class. public class ParentClass { private x; private y; private z; something.something = new ChildClass public class ChildClass { need to get x, y and z; } } How do I… >>> More
Compare base class part of sub class instance to another base class instance

as seen on Stack Overflow - Search for 'Stack Overflow'
I have number of DTO classes in a system. They are organized in an inheritance hierarchy. class Person { public int Id { get; set; } public string FirstName { get; set; } public string ListName { get; set; } } class PersonDetailed : Person { public string WorkPhone { get; set; } … >>> More
making class accessible from class path in dynamic class loading

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a project created in Eclipse, and I defined an interface and a class for dynamic class loading, the class is in the project directory, so I have this code in my project: if (handlerClassName != null) { TypeHandler typeHandler = null; try { typeHandler =… >>> More