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);
}
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
#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/
How can I overwrite an entire CSS style for a class, id or other CSS selector?
For example:
If in styles1.css I have:
/* also, this file contains a lot of styles used on other pages */
.one-great-class {
background: white
...
/* a lot of properties */
}
... and in styles2.css (that is used only in one web page) I want to overwrite the class one-great-class completely what have I do to write?
.one-great-class {
/* Is possible that a line of code to delete all styles from this class? */
}
It's not possible in CSS at the moment.
But there may eventually be a property that does this: all
It can take three values:
initial | inherited | unset
Taken from the Cascading and Inheritance Module:
"For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. "
According to the MDN documentation as of June 2017, all is currently supported by Chrome, Firefox/Mobile, and Opera. Safari supports only the CSS4 value revert, which is not supported by the other browsers.
.one-great-class {
border-radius: 50% 35% / 20% 25% 60%;
color: red;
font: 12px/14px Arial, serif;
height: 20em;
width: 20em;
/*... etc. */
}
.one-great-class {
all: initial;
}
Tested to work with IE9, Chrome and Opera. I had a problem with this when I wrote it, so decided that rather than changing existing rules, that I'd just append a new rule after the existing ones. From memory, the problem was with the default browser found in Android 2.3
Altering an existing rule seemed to be a better(cleaner) solution, though appending new rules ultimately proved to be chosen path. (I was changing background images by creating images with a canvas and then setting the background-image property. The images could be quite large, hence the preference for update)
Function
function replaceRuleAttrib(ruleSelector, attribText, newValue)
{
var nSheets, nRules, sheetNum, curSheet, curStyle, curAttrib;
var nSheets = document.styleSheets.length;
if (nSheets == 0)
document.head.appendChild(document.createElement('style'));
else
for (sheetNum = 0; sheetNum<nSheets; sheetNum++)
{
curSheet = document.styleSheets[sheetNum];
nRules = curSheet.cssRules.length;
for (ruleNum=0; ruleNum<nRules; ruleNum++)
{
curRule = curSheet.cssRules[ruleNum];
if (curRule.selectorText == ruleSelector)
{
for (styleI=0; styleI<curRule.style.length; styleI++)
{
styleName = curRule.style[styleI];
styleVal = curRule.style[styleName];
if (styleName == attribText)
{
curRule.style[styleName] = newValue;
return true;
}
}
}
}
}
document.styleSheets[0].insertRule( ruleSelector+'{' + attribText + ": " + newValue + "; }", 0);
}
Sample CSS (before)
<style>
h1
{
color: red;
}
</style>
Usage:
function onHeadingClick()
{
replaceRuleAttrib('h1', 'color', 'green');
}
Sample CSS (after)
<style>
h1
{
color: green;
}
</style>
Browser will apply css that come last.
.class {
font-size: 16px;
font-size: 14px;
}
The class will get font-size value 14px.
You can decleare a css as final.
.class {
font-size: 14px !important;
}
no genarel css rule can alter it.
Browser uses this method to give priority
inline < embeded < external < user-agent.
If you think you need more controll on css then use javascript to directly modfy dom.
I quite dont get it here, firefox doesn't want to accept ❝ (U-275D) as my first letter dispite the fact that they are supposed to accept initial quote.
Does anybody have any idea ? http://jsfiddle.net/DXn3B/1/
.who
{
font-family: 'Open Sans', sans-serif;
font-weight:lighter;
color:#565656;
font-size:1em;
}
.who:first-letter
{
float: left;
font-size: 2.5em;
line-height: 1;
margin-right: 0.2em;
}
.who:before
{
content: '\275d';
color:#272727;
}
.who:after
{
content: '\275e';
color:#272727;
font-size: 2.5em;
font-family: 'Coverdale-Condensed', sans-serif;
}
The notation '\275d' denotes U+275D HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT, which has General Category So [Symbol, Other]. Hence, the CSS 2.1 rule on :first-letter does not apply to it:
“Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included”.
You could try put them as text:
.who:before
{
content: '❝';
color:#272727;
}
.who:after
{
content: '❞';
color:#272727;
font-size: 2.5em;
font-family: 'Coverdale-Condensed', sans-serif;
}
jsFiddle.
Try this site for more cool stuff.
I can’t see why you are using both .who:first-letter and .who:before here. (.who:before already allows you to format the content you are inserting almost any way you like, so using :first-letter as well is kinda redundant, or in this case, maybe even the cause of the error.)
Add the declaration you have set for the first one into the rule for the latter (and delete the first completely), then you should get what you want.
Really, I have no idea why it doesn't work. But maybe that's somewhere near your desired result. http://jsfiddle.net/DXn3B/4/
I used the :before itself instead of :first-letter and it works fine. Maybe those two aren't meant to work together like that.