I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule:
.red:first-child {_x000D_
border: 5px solid red;_x000D_
}<p class="red"></p>_x000D_
<div class="red"></div>What is wrong in this selector and how do I correct it?
Thanks to the comments, I figured out that the element has to be the first child of its parent to get selected which is not the case that I have. I have the following structure, and this rule fails as mentioned in the comments:
.home .red:first-child {_x000D_
border: 1px solid red;_x000D_
}<div class="home">_x000D_
<span>blah</span>_x000D_
<p class="red">first</p>_x000D_
<p class="red">second</p>_x000D_
<p class="red">third</p>_x000D_
<p class="red">fourth</p>_x000D_
</div>How can I target the first child with class red?
This question is related to
css
css-selectors
All in All, after reading this all page and other ones and a lot of documentation. Here's the summary:
/* This should select the first 2 element with class display_class
* but it will NOT WORK Because the nth-child count even siblings
* including the first div skip_class
*/
.display_class:nth-child(-n+2){
background-color:green;
}<ul>
<li class="skip_class">test 1</li>
<li class="display_class">test 2 should be in green</li>
<li class="display_class">test 3 should be in green</li>
<li class="display_class">test 4</li>
</ul>Currently, there is a selector :nth-child(-n+2 of .foo) that supports selection by class but not supported by modern browsers so not useful.
So, that leaves us with Javascript solution (we'll fix the example above):
// Here we'll go through the elements with the targeted class
// and add our classmodifer to only the first 2 elements!
[...document.querySelectorAll('.display_class')].forEach((element,index) => {
if (index < 2) element.classList.add('display_class--green');
});.display_class--green {
background-color:green;
}<ul>
<li class="skip_class">test 1</li>
<li class="display_class">test 2 should be in green</li>
<li class="display_class">test 3 should be in green</li>
<li class="display_class">test 4</li>
</ul>The :first-child selector is intended, like the name says, to select the first child of a parent tag. The children have to be embedded in the same parent tag. Your exact example will work (Just tried it here):
<body>
<p class="red">first</p>
<div class="red">second</div>
</body>
Maybe you have nested your tags in different parent tags? Are your tags of class red really the first tags under the parent?
Notice also that this doesnt only apply to the first such tag in the whole document, but everytime a new parent is wrapped around it, like:
<div>
<p class="red">first</p>
<div class="red">second</div>
</div>
<div>
<p class="red">third</p>
<div class="red">fourth</div>
</div>
first and third will be red then.
Update:
I dont know why martyn deleted his answer, but he had the solution, the :nth-of-type selector:
.red:nth-of-type(1)_x000D_
{_x000D_
border:5px solid red;_x000D_
} <div class="home">_x000D_
<span>blah</span>_x000D_
<p class="red">first</p>_x000D_
<p class="red">second</p>_x000D_
<p class="red">third</p>_x000D_
<p class="red">fourth</p>_x000D_
</div>Credits to Martyn. More infos for example here. Be aware that this is a CSS 3 selector, therefore not all browsers will recognize it (e.g. IE8 or older).
Try this solution:
.home p:first-of-type {_x000D_
border:5px solid red;_x000D_
width:100%;_x000D_
display:block;_x000D_
}<div class="home">_x000D_
<span>blah</span>_x000D_
<p class="red">first</p>_x000D_
<p class="red">second</p>_x000D_
<p class="red">third</p>_x000D_
<p class="red">fourth</p>_x000D_
</div>You could use nth-of-type(1) but be sure that site doesn't need to support IE7 etc, if this is the case use jQuery to add body class then find element via IE7 body class then the element name, then add in the nth-child styling to it.
Try This Simple and Effective
.home > span + .red{
border:1px solid red;
}
The above answers are too complex.
.class:first-of-type { }
This will select the first-type of class. MDN Source
I just used :first as CSS selector successfully.
.red:first
You can change your code to something like this to get it work
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
This does the job for you
.home span + .red{
border:3px solid green;
}
Here is a CSS reference from SnoopCode about that.
I am using below CSS to have a background image for the list ul li
#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){_x000D_
background-position: center;_x000D_
background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);_x000D_
background-repeat: no-repeat;_x000D_
}<footer id="footer">_x000D_
<div class="module">_x000D_
<ul class="menu ">_x000D_
<li class="level1 item308 active current"></li>_x000D_
<li> </li>_x000D_
</ul> _x000D_
</div>_x000D_
<div class="module">_x000D_
<ul class="menu "><li></li>_x000D_
<li></li> _x000D_
</ul>_x000D_
</div>_x000D_
<div class="module">_x000D_
<ul class="menu ">_x000D_
<li></li>_x000D_
<li></li>_x000D_
</ul>_x000D_
</div>_x000D_
</footer>To match your selector, the element must have a class name of red and must be the first child of its parent.
<div>
<span class="red"></span> <!-- MATCH -->
</div>
<div>
<span>Blah</span>
<p class="red"></p> <!-- NO MATCH -->
</div>
<div>
<span>Blah</span>
<div><p class="red"></p></div> <!-- MATCH -->
</div>
you could use first-of-type or nth-of-type(1)
.red {_x000D_
color: green; _x000D_
}_x000D_
_x000D_
/* .red:nth-of-type(1) */_x000D_
.red:first-of-type {_x000D_
color: red; _x000D_
}<div class="home">_x000D_
<span>blah</span>_x000D_
<p class="red">first</p>_x000D_
<p class="red">second</p>_x000D_
<p class="red">third</p>_x000D_
<p class="red">fourth</p>_x000D_
</div>According to your updated problem
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
how about
.home span + .red{
border:1px solid red;
}
This will select class home, then the element span and finally all .red elements that are placed immediately after span elements.
Reference: http://www.w3schools.com/cssref/css_selectors.asp
Could you try something like this:
.red:first-of-type {
border: 5px solid red;
}
you also can use this for last element (if you need it):
.red:last-of-type {
border: 5px solid red;
}
I think a lot of people have explained already. your code is selecting only first child of the first instance. If you want to select all the first children of red class, you need to use
.home > .red:first-child {
/* put your styling here */
}
The correct answer is:
.red:first-child, :not(.red) + .red { border:5px solid red }
Part I: If element is first to its parent and has class "red", it shall get border.
Part II: If ".red" element is not first to its parent, but is immediately following an element without class ".red", it shall also deserve the honor of said border.
Philip Daubmeier's answer, while accepted, is not correct - see attached fiddle.
BoltClock's answer would work, but unnecessarily defines and overwrites styles
(particularly an issue where it otherwise would inherit a different border - you don't want to declare other to border:none)
EDIT: In the event that you have "red" following non-red several times, each "first" red will get the border. To prevent that, one would need to use BoltClock's answer. See fiddle
Since the other answers cover what's wrong with it, I'll try the other half, how to fix it. Unfortunately, I don't know that you have a CSS only solution here, at least not that I can think of. There are some other options though....
Assign a first class to the element when you generate it, like this:
<p class="red first"></p>
<div class="red"></div>
CSS:
.first.red {
border:5px solid red;
}
This CSS only matches elements with both first and red classes.
Alternatively, do the same in JavaScript, for example here's what jQuery you would use to do this, using the same CSS as above:
$(".red:first").addClass("first");
For some reason none of the above answers seemed to be addressing the case of the real first and only first child of the parent.
#element_id > .class_name:first-child
All the above answers will fail if you want to apply the style to only the first class child within this code.
<aside id="element_id">
Content
<div class="class_name">First content that need to be styled</div>
<div class="class_name">
Second content that don't need to be styled
<div>
<div>
<div class="class_name">deep content - no style</div>
<div class="class_name">deep content - no style</div>
<div>
<div class="class_name">deep content - no style</div>
</div>
</div>
</div>
</div>
</aside>
I believe that using relative selector + for selecting elements placed immediately after, works here the best (as few suggested before).
It is also possible for this case to use this selector
.home p:first-of-type
but this is element selector not the class one.
Here you have nice list of CSS selectors: https://kolosek.com/css-selectors/
I got this one in my project.
div > .b ~ .b:not(:first-child) {_x000D_
background: none;_x000D_
}_x000D_
div > .b {_x000D_
background: red;_x000D_
}<div>_x000D_
<p class="a">The first paragraph.</p>_x000D_
<p class="a">The second paragraph.</p>_x000D_
<p class="b">The third paragraph.</p>_x000D_
<p class="b">The fourth paragraph.</p>_x000D_
</div>Source: Stackoverflow.com