This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 7 years ago.
Say I have the following -
<div>
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
Is there a way to use CSS to modify the style of each separately, without having to apply a unique class in each case?
For example, something like div span { color: blue; } but then apply a different colour to the subsequent span and so on?
(...and yes, I have tried many Google searches first!)
Try nth-of-type or nth-child:
span:nth-of-type(1) {
color:blue;
}
span:nth-of-type(2) {
color:red;
}
span:nth-of-type(3) {
color:green;
}
here is the code example
Related
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Closed 4 years ago.
Having some issues targeting the a div using the CSS :first-of-type and applying the styling to all. Any ideas on where I'm going wrong?
Working example here
.message:first-of-type {
background: purple;
}
If you want purple background only for first .message use below css. Pseudoclass :first-of-type it's only for type (div, p etc), not class.
.message {
background: purple;
}
.message ~ .message {
background: none;
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
<div class="tabs">
<div class="title">A</div>
<div class="title">B</div>
<div class="content">Something</div>
</div>
How can I select B title without restructuring my html, and there might be C, D, E and more title be added in. I tried below css it doesn't work
Use nth-child and nth-of-type selectors. Choose any of the below according to your needs.
Solution: 1
.tabs :nth-child(2){
color:red;
}
Solution: 2
.tabs .title:nth-child(2){
color:red;
}
Solution: 3
.tabs .title:nth-of-type(2){
color:red;
}
.tabs .title:nth-child(2) {
color : green;
}
This question already has answers here:
How do I select an element that has a certain class?
(5 answers)
Closed 4 years ago.
For an HTML element like this:
<div class="cas"></div>
...can you use an element before the CSS, like this:
div.cas {
}
...or like this?:
.cas {
}
Or either way?
Yes, either way, depending on your context.
div.cas selects any <div> element with class "cas".
.cas selects any type of element with the class "cas".
For example:
.test1 {
background-color: lightgreen;
}
p.test1 {
color: white;
}
div.test2 {
background-color: lightblue;
}
p.test2 {
color: red;
}
<div class="test1">DIV TEST1</div>
<p class="test1">P TEST1</p>
<div class="test2">DIV TEST2</div>
<p class="test2">P TEST2</p>
See CSS selectors.
Using the class selector will select that element, and others with the same class.
Adding the tag to the selection (div.cas) will only select divs with that class.
Both will work, so either.
This question already has answers here:
How can I combine multiple CSS rules?
(4 answers)
Closed 9 years ago.
I have two CSS rules with different selectors which I want to combine. Both rules have the same CSS properties. The first selector targets th elements, and the other selector targets td elements:
.MyClass th:nth-child(n+6):nth-child(-n+9){
text-align: right;
}
.MyClass td:nth-child(n+6):nth-child(-n+9){
text-align: right;
}
I suppose it is possible to combine these two rules, but how?
EDIT
Okey, I know I put my answer in wrong. My question is a little to simple!
I already was aweare of putting them together with a comma like this:
.MyClass th:nth-child(n+6):nth-child(-n+9),
.MyClass td:nth-child(n+6):nth-child(-n+9){
text-align: right;
}
But what I actually wanted to know is how to only do a single selector of :nth-child(n+6):nth-child(-n+9).
Did you try
.MyClass th:nth-child(n+6):nth-child(-n+9),
.MyClass td:nth-child(n+6):nth-child(-n+9) {
text-align: right;
}
Use a comma , separator, here is a sample
.class1, .class2 {
text-align: right;
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Is it possible to do this:
link
a{ color: red; }
a:hover{ color: blue; }
As inline?
link
No. style="" allows to define only list of style properties. No CSS selectors are allowed there.