<button bg="blue">blue</button>
<button bg="red">red</button>
[bg="blue"] {
background-color: blue;
}
[bg="red"] {
background-color: red;
}
http://codepen.io/Integ/pen/YPRpWE
No class, no ID, just properties.
Use class is more efficient.
.bg-blue {
background: blue;
}
<div class="bg-blue"></div>
That is called attribute equal selector. Yes, you can use it on your own depending the requirement. Of course, if you don't have set class or id then you can use attribute selectors.
Suggestion:
Use data-* attributes instead of attributes for your custom attributes(It is valid in html5). Example:
<button data-bg="blue">blue</button>
Related
I need to select the body element when it has a class beginning with post-type- but not select it when there's also a class beginning with taxonomy-. Does anyone know how to get this to work?
body[class^="post-type-"],
body[class*=" post-type-"] {
&:not([class^="taxonomy-"]),
&:not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
}
EDIT: 0stone0's answer below helped me realize the CSS it was outputting was completely wrong, so this new approach is working well:
body[class^="post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]),
body[class*=" post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
div[class*='post-type-']:not([class*="taxonomy-"])
This pure CSS should target the desired element
Select classes that contain post-type-, but not() containing taxonomy-
div[class*='post-type-']:not([class*="taxonomy-"]) {
border: 1px solid red;
}
<div class='post-type-something'>post-type-something</div>
<div class='post-type-something taxonomy-foobar'>post-type-something taxonomy-foobar</div>
<div class='taxonomy-foobar post-type-something'>taxonomy-foobar post-type-something</div>
Note: Demo uses <div> instead of <body> and applies a border when targeted
I have say 3 spans as below :
<span class = "testVar1" onClick = "testFunction(Var1)">
<span class = "testVar2" onClick = "testFunction(Var2)">
<span class = "testVar3" onClick = "testFunction(Var3)">
testFunction(var){
here I assign class "on" to the span which calls this function
}
If span with class testVar1 calls this then it becomes
<span class = "testVar1 on" onClick = "testFunction(Var1)"></span>
My Css is as below
.test .on {
some CSS
}
Is there a way in CSS where I can use a variable and apply css to those span which is clicked?
Like
.test[Var1 or Var2 or Var3] .on {
some CSS
}
I have achieved it by using multiple selectors manually like#
.testVar1 .on {
some CSS
}
.testVar2 .on {
some CSS
}
I have read the post Using regular expression in css? , it,s helpful but not answering my question.
In this post css is applied to all the element, but I want css to be applied only to the element which called the function.
and so on.
Any help or pointers would be appreciated!
Thanks!
You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:
document.querySelectorAll('span.test').forEach(
span =>
span.addEventListener('click', () => {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
})
)
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test">foo</span>
<span class="test">bar</span>
<span class="test">baz</span>
If you insist on inline event listeners (you really shouldn't, it's widely considered bad practice), for this simple example it's probably even easier:
function foobar(span) {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
}
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test" onclick="foobar(this)">foo</span>
<span class="test" onclick="foobar(this)">bar</span>
<span class="test" onclick="foobar(this)">baz</span>
You can use regex selector: span[class^='test'] which means select every span with class start with "test".
You can combine it with another class (.on) like that: span[class^='test'].on
As for inline code, you can do something like that:
const spans = document.querySelectorAll('span[class^="test"]'); // select all spans
for (var i=0; i < spans.length; i++) { // iterate them
spans[i].addEventListener('click',function() { // add event listener to them
this.classList.add('on'); // set class on click
});
}
span[class^='test'] {color: blue;}
span[class^='test'].on { color: red; }
<span class="testVar1">1</span>
<span class="testVar2">2</span>
<span class="testVar3">3</span>
Check this for selecting element with more then one class.
And this for regExp selector.
Enjoy code!
I have the following rule:
a:not(.ui-spinner-button):active
{
...
}
I would like a more general rule specifying that "style must applied to all A tag that does NOT have a class name that begin with 'ui-' ".
So, I should "merge" this kinf of definition [class*='ui-'] with not().
Is possible in some way?
Thank you.
Yes, it's possible, just put [class*='ui-'] inside a not().
a {
color: cyan;
}
a:not([class*='ui-']) {
color: pink;
}
<a class='ui-foobar'>ui-foobar</a>
<a class='foobar'>definitely not ui-foobar</a>
The first link will be cyan, the second one pink.
Demo
Is there a CSS way to select an element that looks like that by class?
<a class="" href="...">
Like a selector for empty class declarations?
Provided the class attribute is present as you say you can use the attribute selector like this:
jsFiddle
<a class="" href="...">asd</a>
a[class=""] {
color: red;
}
If you want this to work when there is no class attribute present on the element you can use :not([class]).
jsFiddle
asd
a:not([class]) {
color: red;
}
These can then be combined together to handle both cases.
jsFiddle
asd
<a class="" href="...">asd</a>
a[class=""],
a:not([class]) {
color: red;
}
You can use element-attribute selector here with an empty class value
div[class=""] {
color: red;
}
Demo
Note: You can replace the div with required element
Given the following HTML:
<div class="required">required only</div>
<div class="note">note only</div>
<div class="required note">required and note</div>
<div class="note required">note and required</div>
And CSS:
.required:after { content: " *"; color: red; }
.note:after { content: " +"; color: red; }
The result in Firefox 11 is:
required only *
note only +
required and note +
note and required +
Where more than one class is supplied (.required and .note) I would like to have both "*" and "+" appended to the element such that:
required and note *+
note and required +*
Is this possible using pure CSS, and if so, how?
Edit: Here's a link to jsfiddle for this example: http://jsfiddle.net/xpZST/
You'll need additional rules for this to work.
Given that the ordering of classes matters (when normally it shouldn't!), you'll need to use attribute selectors instead of class selectors, and you'll need to create two rules:
[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }
Simply add these rules after the ones you have and it should work, as attribute and class selectors are equally specific.
jsFiddle preview
By the way, if you have common styles you can keep your code DRY by isolating them in another rule. For example, you can select each class and give them both color: red:
.required:after, .note:after { color: red; }
jsFiddle preview