i have html like this:
<div class="container">
<div class="foo">Foo!</div> <!-- if this is red... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...i want this blue... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...and this red. -->
<div class="bar">Bar!</div>
</div>
and i want every second "foo" to have a blue background, the other foo:s red.
i have tried:
.container .foo:nth-child(odd)
{
background-color: red;
}
.container .foo:nth-child(even)
{
background-color: blue;
}
i have also played some with nht-of-type but i can't get it to work.
In the test above they all are "odd" since all of them get blue.
What am i doing wrong?
You had your nth-child selector in the wrong spot:
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}
jsFiddle example
Your selectors are a little off.
They should be on the parent.
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}
Related
I've am stuck on this css issue. Here is a simplified code :
<div class="parent type1">
<div class="child">
red
</div>
</div>
<div class="parent type2">
<div class="child">
blue
</div>
<div>
I don't know how to code this (or if I can code this) but I need something like :
"If class is "child" and parent's class is "type2", put the div in blue (without changing the red div)".
Knowing that in my specific situation, I can't change the html, so I can't add some ids.
Thank you in advance and have a great day ! :-)
Chained CSS could do the trick:
.type2 .child {
color: blue;
}
/* OR combined classes + child */
.parent.type2 .child {
color: blue;
}
/* OR direct child of type2 */
.type2 > .child {
color: blue;
}
.type2 div{
color : blue;
}
.type2 .child{
color : blue;
}
<div class="parent type1">
<div class="child">
red
</div>
</div>
<div class="parent type2">
<div class="child">
blue
</div>
<div>
I´m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291
I want to give the first element of a class a different style from the other elements using the same class.
So I created something like this following the workaround from the post above:
.kn-menu > .control.has-addons {
border: 1px solid red;}
.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}
But this is not working for me.
Can anyone tell me what is wrong with my approuch?
Thanks!
You can use the first-of-type pseudo class:
.test {
width: 200px;
height: 100px;
margin: 10px;
background-color: green;
}
.test:first-of-type{
background-color: red;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
suppose you have three divs within a parent section like this:
<section class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</section>
And on your CSS you have styles for those divs with class name "child":
.parent .child{
border:0;
}
You can give particular properties to the first div like this:
.parent .child:first-child{
border: 1px solid #000000;
}
Or select child what you want:
.parent .child:nth-child(3){
border:1px solid #ffffff;
}
if i understand it correct you just want to difference the first element. I think that solution can be use pseudo class first-of-type
HTML
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
CSS
.item {
color: red;
font-size: 32px;
}
.item:first-of-type {
color: blue
}
https://codepen.io/smil3cz/pen/GRjYyyL
This question already has answers here:
CSS - First child without certain class
(4 answers)
Closed 2 years ago.
This code is going to be used to overload the style of a page I dont control. I cannot change the HTML nor can I use JavaScript. I can only rely on good old CSS. The HTML is dynamic and look like this:
<div class="container">
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
I dont know how many children .container have. No nth-child() as far as I am aware of. The following example is valid too:
<div class="container">
<div class="item" style="display: none">l</div>
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
I want to apply a specific property to the first visible element. Here it is 'n'.
If all element are red:
.item {
background: red;
}
I would like to change it to blue:
??? {
background: blue;
}
I tried:
.item {
background: red;
}
.item:not([style='display: none']):first-child {
background: blue;
}
Demo:
.item {
background: red;
}
.item:not([style='display: none']):first-child {
background: blue;
}
<div class="container">
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
Here 'n' should have a blue background.
How can I achieve that? What selector should I use?
tl;dr (explanation followings):
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
Alright, first we can achieve this by rethinking the problem. Asking for the first visible child is actually the same logic as asking the first child after the last hidden child.
CSS have some uncommon combinator. Here we are going to use the adjacent sibling combinator (+). Let the MSDN introduce it:
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
We can color every hidden .item following another hidden .item like that:
.item[style='display: none'] + .item[style='display: none'] {
background: blue;
}
But what we want is the first child after the last hidden child. Here the pseudo-attribute :not() will do the trick:
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
Demo:
.item {
background: red;
}
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
<div class="container">
<div class="item" style="display: none">l</div>
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
This is what I have :
Less :
.parent{
&-caption{
color:red;
}
&:first-child{
border: solid blue !important;
&-caption{
color:blue !important;
}
}
}
Html
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
Problem : But the first child's caption's color does not become blue.
Is this possible in LEss ? I know it's possible in Sass.
Thanks
Your less compiles to the following css:
.parent-caption {
color: red;
}
.parent:first-child {
border: solid blue !important;
}
.parent:first-child-caption {
color: blue !important;
}
As you can see, that isn't really valid css. There is a playground on the less css site that allows you to preview how your css code is compiled.
I would recommend you just do something like this
.parent .parent-caption {
color: red;
}
.parent:first-of-type .parent-caption {
color: blue;
}
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
You can do this in Less like so:
.parent {
&-caption {
color: red;
}
&:first-of-type &-caption{
color: blue;
}
}
The explanation for this feature is on the features page of Less css under the Parent Selectors heading.
Given the following, is there a way to target an element ONLY if it is an h3 AND it is positioned immediately inside the parent?
<style>
h3:first-of-type { color: #f00; }
</style>
Example a)
<div class="mydiv">
<h3 class="tobetargeted"></h3>
</div>
Example b)
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted"></h3>
</div>
Neither first-of-type or first-child will work because in both cases, the h3 element evaluates to true. What I want is for Example a) to be true but Example b) to be false.
So... IF the element is an H3 AND it is the first element immediately inside the parent.
Any ideas?
:first-child should definitely work out for you.
.test {
border: 1px solid black;
margin: 0 0 10px;
}
.test h3:first-child {
color: red;
}
<div class="test">
<h3>H3 - should be red</h3>
</div>
<div class="test">
<p>p</p>
<h3>H3 - should be black</h3>
</div>
Use this
h3:nth-child(1) { color: #f00; }
h3:nth-child(1) { color: #f00; }
<div class="mydiv">
<h3 class="tobetargeted">Hello</h3>
</div>
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted">Hello</h3>
</div>