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.
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 using google places autocomplete to show location suggestions for users. I have added a custom result to the autocomplete suggestions using the following code -
$timeout(function(){
var el = angular.element('<div id="cantFind" class="pointer m-b-5">Can\'t find your location?</div>');
angular.element(".pac-container").append(el);
el.bind("mousedown", function() {
$scope.setEnterManualView(true);
});
}, 2000);
Problem here is the "Can't find your location?" option comes at random order in suggestions. I want it to come at the end only as the last suggestion. Something like this -
After searching quite a lot, it looks like there is no such direct way to do this. The only way I could do this is by modifying the CSS such that "Can't find your location?" comes at the bottom. Here is the CSS I used :
.location-autocomplete-container{
&:after{
padding-top:47px;
}
.cant-find-location{
font-size: 13px;
position:absolute;
width: 100%;
bottom:16px;
left:0;
i{
font-size: 1.2em;
margin-right: 5px;
}
}
}
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);
}
#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.