Say I have a parent div with three child divs inside and I want to give each child a different background colour, can this be done with only one nth-child selector - my parent div has a class of "parent" and the three children have classes of "child1", "child2", "child3".
Thanks.
Yoy can't set 3 background-color in one selector (the 2 override by last defenition) as in image
I recommand you learn about selector in css:https://www.w3schools.com/cssref/css_selectors.asp
and more learn here(thanks to #Mosh Feu):https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
and: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
SO you have to do it as below:
.parent .child1{
background-color:red;
}
.parent .child2{
background-color:orange;
}
.parent .child3{
background-color:blue;
}
<div class="parent">
<div class="child1">one </div>
<div class="child2">tow </div>
<div class="child3">three </div>
</div>
You won't be able to do this with just one rule and just one selector.
In CSS, every rule applies a specific set of styles to all the elements that match its selector(s). This is a fundamental aspect of how CSS works. You can't have different declarations in a single rule apply selectively to specific elements — they will all just get overridden, leaving you with just one winning declaration that gets applied to all the elements that are matched. This is true even if you have multiple selectors in the same rule, and even if you use :nth-child() instead of class selectors.
For example,
.child1, .child2, .child3 {
background-color: red;
background-color: blue;
background-color: yellow;
}
is treated as
.child1, .child2, .child3 {
background-color: yellow;
}
which applies a yellow background to all three children, both despite and because of the fact that all three children are listed. The same holds true with .parent > :nth-child(1), .parent > :nth-child(2), .parent > :nth-child(3) as the selector.
Therefore, if you want to style three elements differently, you will need three rules, one for each element:
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
.child3 {
background-color: yellow;
}
Again, this is true regardless of what selector you use to actually reach each child element. The point is that each set of style declarations (property: value pairs) needs to appear in its own set of selector {} rules.
Why do you want to use nth selector if your child elements use different classes? Nth-selector should be used for elements that haven't got class selector or where the content is dynamic. In this particular case you don't need nth selector, just use
.parent .child1 {
background-color: #d3d3d3;
}
.parent .child2 {
background-color: #000;
}
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
Related
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
I have two situations:
<div class="parent">
<div class="content">TEXT</div>
</div>
or
<div class="content">TEXT</div>
I want to change text color if class parent is present or not.
I write this css but it doesn't work:
div:not(.parent) > .content{
color: blue;
}
How can I solve it?
It doesn't work because in the second example you have no div element wrapping the content so div:not(.parent) is not matched (.content is a direct child of the body element)
Either you write
:not(.parent) > .content {
color: blue;
}
(without defining the element) or just reverse your logic: give a basic style for .content in case there's no parent element and override the style if the .parent exists:
.content {
color: blue; /* no .parent */
}
.parent > .content{
color: inherit;
}
Up until just a few moments ago, I thought for sure that selector "distance" affected which css styles would be applied. Here's what I mean by distance:
.class-2 .target {
background-color: green;
}
.class-1 .target {
background-color: red;
}
<div class="class-1">
<div class="class-2">
<p class="target">Hello World!</p>
</div>
</div>
In this example, I guess I expected that the .target element would have a green background color--since it seems like the .class-2 .target style is more specific--at least, target is more closely inside class-2 than class 1. But this is not the case. Apparently the only thing affecting the priority is the order they were declared in.
This seems really strange to me; I guess I assumed that CSS rules were applied from the outside in, or at least that that was a factor.
What do I do when I need a classes styles to be applied based on which class it is more closely inside. Is there any way to do this?
For example, in this JSFiddle, how would I get the backgrounds to be appropriately red and green colored? https://jsfiddle.net/emsca2ww/3/
In my specific case I need this because I am using a generally 12 column grid, and I need to (in some situations) set a 16 column grid context inside that.
In this specific case you can use the child selector: >
https://jsfiddle.net/emsca2ww/7/
.class-2 > .target {
background-color: green;
}
.class-1 > .target {
background-color: red;
}
This only works for parent/child elements. Otherwise you would have to introduce more parent/child relationships if needed or rethink how you are using the selectors.
Selectors have specificity and cascade order. The above selectors have the same specificity because they are both composed of two classes. This falls back to cascade order. They exist in the same stylesheet as well, so the final priority rule is applied: order in the CSS document.
If you want .class-2 to have higher priority than .class-1, you have to move the selector after it in the stylesheet:
.class-1 .target {
background-color: green;
}
.class-2 .target {
background-color: red;
}
However, this has nothing to do with the HTML itself. There is no selector for closeness between parents and children in the HTML document. You could do something like:
.class-2 > * > .target
But this selector only works if .target is a grandchild.
There is no distance priority in CSS, the only rules for priority are:
the number of ids
the number of classes, pseudo-classes
the number of elements, pseudo-elements,
the * selector
as defined in http://www.w3.org/TR/selectors/#specificity
To achieve what you want, you need to add some classes in your css:
<div class="foo class-1">
<div class="foo class-2">
<p class="target">Hello World!</p>
</div>
</div>
.class-1 .target, .foo .class-1 .target, .foo .foo .class-1 .target {
background-color: red;
}
.class-2 .target, .foo .class-2 .target, .foo .foo .class-2 .target {
background-color: green;
}
By exemple. But if you have a lot of nesting, it could become a nightmare, and you should consider another way.
JS Fiddle
Without altering the html is there any way to target the last .red class using CSS?
<div class="row">
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Target Me With CSS???</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
</div>
here's what I've tried :
.row > div{
display:inline-block;
padding:10px;
}
.row .red{
background-color:#770000;
color:#fff;
}
.row .red:first-child{
background-color:#440000;
color:#fff;
}
/*have tried :last-of-type too*/
.row .red:last-child{
background-color:#FF0000;
}
.row div:last-child{
background-color:#0000BB;
}
I don't believe there is a way to do that without using JS.
The closest you can get is to target the 3rd item with:
.row div:nth-child(3) {
background: chucknorris;
}
You can include a qualifier to only target the third child if it is .red like so:
.red:nth-child(3) {
background: chucknorris;
}
http://jsfiddle.net/s76J3/3/
Unfortunately, you can't do this with CSS alone. Here are a few other SO questions that are related to yours:
Using :last-child with class selector
CSS last-child selector: select last-element of specific class, not last child inside of parent?
However, if your last .red sometimes is in different positions, and you can't change the HTML at all, then you will have to rely on some light JS/jQuery.
$(function() {
$('.row .red').last().addClass('last-red-class');
});
You can use it to add another class to the last .red, and just reference that in your CSS.
http://jsfiddle.net/s76J3/2/
HTH
:last-of-type description
The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.
and syntax
element:last-of-type { style properties }
So, what really going in your example is that the browser selected the right div element but it was not the last div element of its parent; therefore, nothing was applied. To test this, change all your .red class div into a span and do the following
.row span:last-of-type{
background-color:#FF0000;
}
then you will get a working code.
http://jsfiddle.net/s76J3/4/
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.