I would like to use wildcard selection for :hover and active
My current css is:
a.trigger
And I transformed it to:
a[id*='trigger-'] {
}
I also need the same for hover and active. Can I do that?
a.trigger:hover {
}
a.active.trigger {
}
How can I transform that using wildcard?
a.active.[id*='trigger-'] {
}
I’m not really clear what you’re asking, but is this the answer?
a[id*='trigger-']:hover,
a[id*='trigger-']:active {
}
Related
I have a boolean array that I am displaying in a razor foreach loop. Within the loop I am displaying the different values within the array. Is it possible,if so how, to change the css based on the value it is displaying?
For example
if (#status == true) THEN color = green; if (#status == false) THEN color = red.
If I understand your question correctly, you could add a data-attribute to the HTML element and alter the value (for example with Javascript) to/from "true/false" and use that in your CSS like so:
<element data-status="true">Content</element>
<element data-status="false">Content</element>
[data-status="true"] {
color: green;
}
[data-status="false"] {
color: red;
}
$('.test').each(function() {
if(parseInt($(this).css('font-size')) > 16) {
$(this).css('color', 'green');
}
});
.test {
font-size: 18px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">Javascript manipulation: Green when largen than 16px</p>
I came across this question having the same problem, however I have implemented another solution, using c#/razor/css and no javascript. Someone might like this better.
First: define the possible values as an enumeration:
public class enum MyRateTyp{
Level1,
Level2,
Level3
}
Second:
Find a place where, given the number on which the style will be based, the conversion will take place. In my case I added an extension method to the int type.
public MyRate Evaluate(this int i)
{
MyRate answer = MyRate.Level1;
if(i<50)
{
answer = MyRate.Level1;
}
.
//All if statements here
.
if (i>100)
{
answer = MyRate.Level3;
}
return answer;
}
Third: On your .css file, define the style for each possible value, like so:
.Level1{
/*Style here for level 1*/
}
.Level2{
/* Style here for level 2*/
}
/*
Other Styles here
*/
Finally On the Razor page, assign the extension method to the css class of the element you want to change the style based on the value.
For example.
The level is <p class="#(myInt_variable.Evaluate())"> #(myInt_Variable) </p>
It is possible to change the color by putting an event on the box. This is done in javascript "AddEventListener"
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
I know that this is super simple with jQuery, although I am after a CSS only solution (if possible).
I have a list of divs, with the last item being an error message. I have a simple filtering system, and if none of the divs match the selected filter, I would like to display the error div.
HTML Structure:
<div id="listHolder">
<div class="listItem" data-filter-class="["filter1"]"></div>
<div class="listItem" data-filter-class="["filter2"]"></div>
<div class="listItem" data-filter-class="["filter1"]"></div>
<div class="listItem" data-filter-class="["filter4"]"></div>
<div class="errorItem">Nothing to display here</div>
</div>
What I am trying to achieve:
If a div does not match any of the filters, my filter plugin gives them the class of inactive. Hence, I need to check if all divs with the class of listItem also have the class of inactive to give the errorItem class the style of display:block.
FYI I am using the Wookmark plugin for my list and filtering system. I am also using LESS.
Sure it's possible: http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/
You want to hide the last item if a previous item is not hidden:
.listItem:not(.inactive) ~ .errorItem {
display: none;
}
The demo uses JS just to toggle the inactive class, not for display logic of the errorItem.
I still agree with all the smart people here though: JS can probably do this better. You're using it already anyway.
The problem you have is in your requirement:
I need to check if all divs with the class of listItem also have the class of inactive to give the errorItem class the style of display:block
While we can set a style for the final <div> element based on its preceding siblings, we can't (without knowing how many there might be) 'check if all divs' have the inactive class. We can, however, use the sibling combinator (+) and a cumbersome selector:
.errorItem {
display: none;
}
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem {
display: block;
}
This is, however, ridiculous (especially if there's a dynamic number of elements preceding the .errorItem element.
If there's a class-name applied for an element which does match the supplied filters, active for example, this is much simpler, and achieved by:
.errorItem {
display: block;
}
.listItem.active ~ .errorItem {
display: none;
}
Also, as pointed out in the comments, the negation operator is also available (though, obviously, it depends on implementation by the browser in use), which would lend itself to the selector:
.errorItem {
display: block;
}
.listItem:not(.inactive) ~ .errorItem {
display: none;
}
On the whole, I'd strongly suggest using JavaScript to support this functionality, especially since the use of Wookmark implies JavaScript (if not necessarily jQuery) use in the same site already.
Native JavaScript:
function hasPrecedingSibling (elem, state) {
if (!state) {
return false;
}
var found = false,
cur = elem;
while (cur.previousElementSibling && found === false) {
if (cur.classList.contains(state)) {
found = true;
}
else {
cur = cur.previousElementSibling;
}
}
return found;
}
[].forEach.call(document.querySelectorAll('.errorItem'), function (err) {
err.style.display = hasPrecedingSibling (err, 'active') ? 'none' : 'block';
});
Is there a way to style an ID based on a specific word in the ID name?
If I have something like this:
<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>
Normally I'd style it like this:
div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
color: #F0F;
}
But I'd MUCH RATHER do something like this:
div[# contains the word "name-of-id"] {
color: #F0F;
}
Is there a way to target a specific word in an ID like that?
I have very limited access to the html - I can add scripts/styles to the layout, but that's about it.
Use the CSS3 prefix substring matching attribute selector:
div[id^="name-of-id"] {
color: #F0F;
}
It is supported by all current browsers. For support in older version of IE, use the Selectivizr polyfill. There is also a selector for suffixes ([id$="..."]) and for general substrings ([id*="..."]).
If you can add javascript (and you use jQuery), you could add something like this:
$('div').each(function(){
if(this.id.match('name-of-id')) {
$(this).addClass('someClass');
}
});
Without jQuery, you could do:
var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
if(this.id.match('name-of-id')) {
this.className = this.className + 'someClass';
}
}
And then style them with a class:
.someClass {
/* your CSS styles */
}
Granted, running $('div') would be slow (as far as javascript is concerned) if your page contains a lot of them, so if you could narrow that selector down, this might be a more viable solution.
More to the point, there isn't a method I'm aware of to match partial ID names in CSS alone.
Consider the following Groovlet:
html.html
{
head {
title("Groovy Test")
}
body {
center {
img(src:"getPlot.groovy?name=name&value=value")
}
}
}
Is there a better way to generate the URL? I'm looking to eliminate the explicit var/vals from the URL.
You could use UrlRewriteFilter for this. It's like mod_rewrite but implemented as a servlet filter.