#elem {
-myCustom: 99;
}
OR
#elem {
--myCustom: 99;
}
I have seen both of the above used in examples online. What the difference between the two?
Trying to access custom properties in JavaScript returns null..
#elem {
-myCustom: 99;
}
<div id="elem">some text</div>
elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);
single leading dash is used for vendor prefixes
double leading dash is used for defining custom properties.
2 Defining Custom Properties: the '--*' family of properties
A custom property is any property whose name starts with two dashes
(U+002D HYPHEN-MINUS), like --foo. The <custom-property-name>
production corresponds to this: it’s defined as any valid identifier
that starts with two dashes.
An example from W3C:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
It's worth noting that CSS variables are implemented in Firefox 31 and newer.
Custom properties use one dash, by convention followed by the renderer/software.
For example:
-webkit-box-shadow
-moz-box-shadow
...
But it seems that there is a new feature implementing two dashes, this might be interesting for you:
http://www.broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/
Related
Color gets applied when using :visited pseudo class.
Company
.footer {
&__link {
&:link,
/*&:visited*/ {
color: yellow ;
}
}
}
you don't need to nest it or make it any complicated.
I think this should work for you.
.footer__link:visited {
color: yellow;
}
your nesting is completely fine,
i copied your code and run it in codepen and it worked properly , there are just 2 possibility about the issue
maybe you need to delete that "," after the &:link which is unlikely the issue to be about this part but test it.
your commenting , because in SASS when you comment out something with "//" , the whole line becomes comment and then the first curly bracket becomes as a part of comment and then you declaration fails due to lack of first "{"
You don't need any extra code, Just copy and paste the below code and it will work just fine.
.footer {
/* FOOTER STYLING */
&__link {
color: yellow;
/* LINK STYLING */
}
}
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 have created a table in Eclipse with the help of Vaadin.
I managed to remove the borders of the table with following line:
tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;
but this still leaves me with a vertical line like this:
Is there a way to hide all the cell borders? And an extra bonus, would it be possible to give the first cell (the one with "Gebruiker") the color #F4F4F4 and the second cell (the textbox) the color #E2E2E2
EDIT:
the formlayout would be good, but I can't seem to get the background colors working so I reverted to the tables. This is the code:
JAVA
tblReset.addContainerProperty("Gebruiker", String.class, null);
tblReset.setCellStyleGenerator(new Table.CellStyleGenerator() {
#Override
public String getStyle(Table source, Object itemId, Object propertyId) {
if("Gebruiker".equals(propertyId)){
return "style-name-with-black-background";
} else {
return "style-name-with-yellow-background" ;
}
}
});
CSS
.style-name-with-black-background {
background-color: black ;
}
.style-name-with-yellow-background {
background-color: yellow ;
}
Supposing the answer to cfrick's comment is no, looks like it depends on what theme you're using:
If it's valo (recommended for a few reasons and from the screenshot seems like you're already using it but not 100% sure) then there are 2 other styles, ValoTheme.TABLE_NO_VERTICAL_LINES & ValoTheme.TABLE_NO_HORIZONTAL_LINES.
In reindeer they seem to be missing so you'll probably have to manually define custom style(s) in your theme. See below a simple/naive attempt:
add the style to the table
table.setStyleName("no-vertical-lines-or-border");
while defining it in your theme
.v-table-no-vertical-lines-or-border .v-table-header-wrap /* remove header-table borders */,
.v-table-no-vertical-lines-or-border .v-table-body /* remove body-table borders */,
.v-table-no-vertical-lines-or-border .v-table-cell-content /* remove cell borders */ {
border: none;
}
As for the cells, you can use a style generator, again with your custom defined styles for each cell, something along the lines of:
table.setCellStyleGenerator(new Table.CellStyleGenerator() {
#Override
public String getStyle(Table source, Object itemId, Object propertyId) {
if("description".equals(propertyId)){
return "style-name-with-F4F4F4-background";
} else {
return "style-name-with-E2E2E2-background";
}
}
});
P.S.: Given that you're experimenting, and if you're working with Vaadin versions 7.2+, take a look at the support for font icons which may come in very handy at times, for example the embedded FontAwesome:
I am trying to put font family for a div if the variable is not equal to null.
my less code is
div.content {
& when (isstring(#contentFont)) {
font-family: #contentFont;
}
}
the output that I get from css is
div.content when (isstring(#contentFont)) {
font-family: Abel;
}
my problem is, the style is not applying for the div.content, not sure what i am doing wrong. Any help would be greatly appreciated.
As discussed in the comments, you're using version 0.4.0 of lessphp – which doesn't seem to support the shorthand guard (when) syntax that you're trying to use.
It looks like it does support guards on mixins, however.
Try splitting your code into a mixin and a usage of this mixin, like this:
/* the mixin */
.fontIfString(#font) when (isstring(#font)) {
font-family: #font;
}
/* usage */
#contentFont: "hello";
div.content {
.fontIfString(#contentFont);
}
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.