3

I have 3 identical divs, and I want to change the first span in the 2:nd one with css, but no matter, what I will type: nth-of-type(2) with class, or first-of-type with span, the first two spans are changing. I need just the first one.

This is my code

.info:nth-of-type(2) span:first-of-type { color: #f4fffe; }
<div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div>

Improve this question
4
  • 1
    .price is the first div inside its parent, so :nth-of-type(2) doesn't match. I don't see the "3 exactly the same divs". Commented Mar 29, 2016 at 20:05
  • thanks for your comments and help - I've just find the answer with using ">" :) Commented Mar 29, 2016 at 20:14
  • It is not SO policy to edit a question and invalidate given answers, which mine now became. Since mine is the only one left I will update it accordingly, but next time, ask a new question or make a comment at a given answer to get a second sample/variant. Commented Mar 30, 2016 at 11:21
  • I need to ask, you just wrote in a comment using > solved your issue (also wrote that under my answer), how come you changed to an answer that doesn't use that? Commented Mar 30, 2016 at 12:52

4 Answers 4

Reset to default
2

You need to put the nth-of-type on your .info instead of your .price

.info:nth-of-type(2) .price span:first-of-type { color: red; }
<div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Do like this, using the direct child selector >

Note that the direct child selector > is needed if you ever add a second element, which I did as a sample, or else that element'f first span will be selected as well

Sample code update based on an edit of the original question

.month24 { padding-left: 10px; } .info:nth-of-type(2) .price > span:first-child { color: #f40; }
<div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> <div class="month24"> <span>85<sup>99</sup></span> <span>dollars</span> </div> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div>

Now, if it's the first span in info, you do like this

.month24 { padding-left: 10px; } .info:nth-of-type(2) > span:first-child { color: #f40; }
<div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> <div class="month24"> <span>85<sup>99</sup></span> <span>dollars</span> </div> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div>

Improve this answer

7 Comments

Worked for me, too! @ChickenLeg - Then please accept the answer :)
Your solution works, but so does the OP's original code except that he/she was looking for .price , rather than .info
@ScottMarcus Well the OP just changed his original question to .info and invalidated the given answers ... which is not according to SO policies
SO policies notwithstanding, the original question was "I have 3 exactly the same divs, and I want to change the first span in the middle one with css," - This clearly indicates that it is the middle div that is being looked for.
@ScottMarcus And the code was .price:nth-of-type(2) span:first-of-type { then changed to .info:nth-of-type(2) span:first-of-type {, which invalidates any given answer using the first, or you disagree? ... And that middle were assumed to be many .price, but after the update one would of course assume .info, or you disagree with that too?
|
-1

Your original code works just fine. The > selector can be used, but :first-of-type works as well. You need to run it with three .info div elements and use a color that is easy to spot.

.info:nth-of-type(2) span:first-of-type { color: #f00; }
<div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div> <div class="info"> <span>Plan</span> <div class="price"> <span>95<sup>99</sup></span> <span>dollars</span> </div> </div>

Improve this answer

2 Comments

Interesting that there is a down vote when the answer is correct.
Since your answer coloring 2 spans, and neither mine nor the accepted one does that, it might not be that strange if someone downvoted, if someone believes it should only be 1.
-2

Unfortunately, there is no way (at least none I know of) to select nth-of-type of a class:

.price:nth-of-type(2) span:first-of-type { color: #f4fffe; }

You need to do this manually.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.