This question already has answers here:
Using HTML data-attribute to set CSS background-image url
(9 answers)
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 7 years ago.
I have a span class cor (color):
<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>
and cor style:
.cor{
padding:5px;
margin:5px;
}
What I want is the .cor background-color to be the color of the data-c element value. Can I style the .cor background based on the data-c value?
edit-------
it is not working:
background-color: attr(data-c);
You can do this with JQuery
$('.cor').each(function() {
var color = $(this).data('c');
$(this).css('background-color', color);
});
.cor{
padding:5px;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>
Related
This question already has answers here:
What CSS selector can be used to select the first div within another div
(4 answers)
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 2 years ago.
Hi can you please help with some css,
I have this code
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
I want to change some properties only in my first input, can somebody help me solve this ?
Thanks
In your case, you can use these css rules:
div:nth-child(1) div input.test {
color: green;
}
or
div:first-of-type div input.test {
color: green;
}
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I'm looking for a css selector that selects elements of a class who's immediate successor (if there is one) does not have that class.
So lets say I have a div:
<div>
<span id="1" class="myClass1">
<span id="2">
<span id="3" class="myClass1">
<span id="4" class="myClass1">
<span id="5">
</div>
This selector would grab spans 1 and 4.
Is this possible without javascript?
Try this selector:
span + span:not(.myClass1) {
border: 1px solid blue;
}
This is the adjacent sibling selector, coupled with the not() selector.
This question already has answers here:
Change Bootstrap input focus blue glow
(21 answers)
Closed 5 years ago.
Is there any way to change/force checkbox glow color on focus?
$(function() {
$('input[type!=hidden]:first').focus();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
Redefine the css :focus property of checkbox:
input[type="checkbox"]:focus {
outline-color: green;
}
<input type="checkbox">
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 5 years ago.
I've wrote this in HTML:
<div> hello</div>
<div class="name"><p>hello</p></div>
<div class="name"><p>hello</p></div>
and this in CSS:
div.name:first-child{
color: red;
}
I would like to change text color of second 'hello' to red. But it doesn't work. What I am doing wrong?
it's the second child, not the first, use nth-child:
div.name:nth-child(2){
color: red;
}
<div> hello</div>
<div class="name"><p>hello</p></div>
<div class="name"><p>hello</p></div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I would like to know how to style an element according to his son.
.content p {
text-indent: 20;
}
<div class="content">
<p>1</p>
<p>2</p>
<p>
<iframe></iframe>
</p>
<!--I have to modify this paragraph-->
<p>4</p>
</div>
What do I need to do, is to modify the paragraph that has the iframe (text-indent: 0).
The best is to write something like
<p class="custom">...</p>
Then add style with
p.custom{
/* Your styles here */
}