This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS selector by style attribute
html:
<div data-family='arial'></div>
in css i want to use this family value. Example:
div{font-family: attr(data-family)}
Family can be any string.
How make it work?
Try this code:
div[data-weight="bold"]{
font-weight: bold;
}
http://www.w3.org/TR/selectors/#attribute-selectors
JSFIDDLE
You can use the following:
div[data-weight="bold"] { font-weight: bold; }
But I don't believe there's any way to use an attribute as a property without some JavaScript
You cannot achieve what you ask about in pure CSS. Using jQuery it could be done this way:
$.each($('div'), function(i, div) {
$.each($(this).data(), function(key, val) {
var realKey = key.replace(/([A-Z]{1})/g, '-$1').toLowerCase();
$(div).css(realKey, val);
})
})
Check this DEMO.
Related
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed last year.
I've searched all over the internet for this answer and I'm still clueless, maybe one of you will know. Basically I'm wondering if in a .css file could you theoredically change the css of an object based off of its text
for example:
h1[innerText="some text thats in the h1"] {
/*styles oh what wonderful styles*/
}
yeah you can use JavaScript with if and else statement as if condition satisfies. it will be executed to change inner HTML. Give me 2 mins to attach code. I can only do this by using js. Further properties can be introduce as here first the color was nothing but after that I introduced pink color as background.
x = document.getElementById('text')
y = x.innerHTML
if (y=="her") {
x.innerHTML = "Paragraph changed!";
document.getElementById("p2").style.backgroundColor = "pink";
}else{
console.log('lol')
}
#p2{
width:200px;
height:100px;
padding-left: 10px;
}
<div class="p2" id="p2">
<h1 id='text'>her</h1>
</div>
This question already has answers here:
CSS Selector that applies to elements with two classes
(2 answers)
Closed 7 years ago.
I have a <div> in my application. It is set to have a class of "enumPanel" and dynamically I add the class "current".
How can I wire this up in less so that my properties will come into effect only when both classes are present on the div ?
.enumPanel .current {
// this does not seem to work
}
CSS
.enumPanel.current {}
LESS
.enumPanel {
&.current {
}
}
.enumPanel.current {
// this will work
}
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin
#mixin pseudoawesome($fa-symbol, $pseudo) {
&$pseudo { // <-- here is the error
content: $fa-symbol;
font-family: FontAwesome;
}
}
and I want to use it like:
#include pseudoawesome(' \f105', ':after');
but I cannot pass :after as argument for $pseudo. Is this somehow possible, or doesn't allow SASS using variables as selector at all?
Thanks
Yes, you can. You must write the name of variable inside the braces:
#{$yourVariable}
#mixin pseudoawesome($fa-symbol, $pseudo) {
&#{$pseudo} {
content: $fa-symbol;
font-family: FontAwesome;
}
}
EDIT: you can find this information here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_
Just search with chrome: "If you want to use"
The section didn't have the anchor tags.
This question already has answers here:
How to change the "html" element's CSS
(3 answers)
Closed 8 years ago.
I have in Site.css:
html { height:200px; }
I want to do the same thing from javascript. So I tried: html.style... and document.style... but they don't work. How is it done?
The <html> element is document.documentElement.
Try this:
Using javascript:
var html = document.getElementsByTagName('html')[0];
html.style.height = 200px;
Using jQuery:
$("html").css("height","200px");
Use jquery, select html tag and change it's css by passing key and value in css function
$(document).ready(function() {
$('html').css('height','200px');
})
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Is there a css selector I can use only if a child element exists?
Consider:
<div> <ul> <li></li> </ul> </div>
I would like to apply display:none to div only if it doesn't have at least one child <li> element.
Any selector I can use do this?
Sort of, with :empty but it's limited.
Example: http://jsfiddle.net/Ky4dA/3/
Even text nodes will cause the parent to not be deemed empty, so a UL inside the DIV would keep the DIV from being matched.
<h1>Original</h1>
<div><ul><li>An item</li></ul></div>
<h1>No Children - Match</h1>
<div></div>
<h1>Has a Child - No Match</h1>
<div><ul></ul></div>
<h1>Has Text - No Match</h1>
<div>text</div>
DIV {
background-color: red;
height: 20px;
}
DIV:empty {
background-color: green;
}
Reference: http://www.w3.org/TR/selectors/#empty-pseudo
If you go the script route:
// pure JS solution
var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
divs[i].style.display = "none";
}
}
Of course, jQuery makes a task like this easier, but this one task isn't sufficient justification to include a whole libary.
Nope, unfortunately that's not possible with CSS selectors.
CSS does not (yet) have any parent rules unfortunately, the only way around it if you must apply it only parents that contain a specific child is with the Javascript, or more easily with a library of javascript called jQuery.
Javascript can be written in a similair way to CSS in someways, for your example we would do something like this at the bottom of our HTML page:
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(For this you would need to include the jQuery library in your document, simply by putting the following in your <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
If you use jquery, you can try out this function
jQuery.fn.not_exists = function(){
return this.length <= 0;
}
if ($("div#ID > li").not_exists()) {
// Do something
}
There is another option
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})