Anonymous replaced elements are content used with :before or :after
See https://developer.mozilla.org/en-US/docs/CSS/content
Here is an example:
.valid:after {
content: '<';
color: green;
}
.invalid:after {
content: '>';
color: red;
}
The problem is HTML entities are not replaced by their caracters and I still see their code.
CSS isn't HTML. Simply use
.valid:after {
content: '<';
color: green;
}
In case of need, you may also escape your characters using the unicode hexa.
For example for ▶ :
.valid:after {
content: '\25B6';
color: green;
}
But you don't need to escape < nor >, even if you embed your CSS in the <style> element of an HTML file.
Just in case (it might be less disturbing to your HTML editor), their codes would be \003C and \003E.
Related
I want to write a single rule for all browser pseudo-elements in type=range input separated by commas, but realised it's not working in my case
//this works
input[type="range"] {
&::-webkit-slider-runnable-track {
height: 2px;
}
}
//this doesn't
input[type="range"] {
&::-webkit-slider-runnable-track, &::-ms-track, &::-moz-range-track {
height: 2px;
}
}
Googling shows that some applications of this work like here Simplified SASS selectors for child pseudo elements?
But maybe the case is in my sass version, or I can't use it with this kind of pseudos?
I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
So,
I have appended a home class to body like so:
document.body.classList.add("home")
I want to select appContainer a child element of body class by doing
html body.home #appContainer { ..... }
This works without CSS Modules but was wondering how I can do it with CSS modules. Thanks
You need to use wrap the class that you want to be global into :global(). If your selector uses an element you must write it directly after the element with no space in between, like element:global(.class) which translates into element.class.
Therefore, in your case html body:global(.home) #appContainer is the answer.
For anyone else that comes across this issue, I am using postcss-preset-env and I had to do this:
Worked ✅
.toolTipTest :global .rc-tooltip-arrow {
color: blue;
}
This did not work ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
And neither did this ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
// Neither Did this
.toolTipTest {
&:global(.rc-tooltip-arrow) {
color: blue;
}
}
Whenever I try to compile Sass code to CSS with either the terminal or the program Koala I get this error message:
Error: Invalid CSS after "body ": expected selector, was "{"
on line 5 of style.sass
Use --trace for backtrace
Here's the piece of code the error seems to be referring to:
body {
background {
color: $background-color
}
}
How can I fix my code to make it compile correctly?
The way your selector reads is that it is looking for the <body> element, and then a <background> element (which isn't a thing that exists in HTML, to my knowledge), and then you are setting the text inside that element to the color in your var $background-color. I think either one of two things:
Either you meant for background to be a class or id, like .background, in which case your code becomes:
body {
.background {
color: $background-color;
}
}
Or, more likely, you are very tired and just got your wires crossed, and mean to be setting the background-color property like this:
body {
background-color: $background-color;
}
Please note that you were also missing an ending semi-colon, which I added.
You cloud try adding a colon after background.
body {
background: {
color: $background-color;
}
}
Sass, unlike Scss, uses indentation instead of curly braces.
body {
background {
color: $background-color;
}
}
becomes
body
background
color: $background-color
Though, I'm quite sure you mean to have background as a property instead of a selector.
body
background-color: $background-color
background must be class name or id or simply background css property.
body {
.background {
color: $background-color;
}
}
body {
#background {
color: $background-color;
}
}
body {
background : $background-color;
}
Is it possible to have the quotes in the following HTML bold and red, without altering the HTML code?
<div class="client_message">“ Ankit ”</div>
Basically I would like to have some CSS that results in the same effect as
"Ankit" but these quotes must be in bold.
Is this possible with CSS only?
You can't. CSS has very limited capability when it comes to selecting things which are not elements.
The nearest CSS has is ::first-letter, but that would select “ A.
If you can use JavaScript you could change the HTML to
<div><q>Ankit</q></div>
(mentioned in comment before)
Now selecting the elements is easy
q {
color: red;
font-weight: bold;
}
.client_message:before {color: red;font-weight: bold;content: "“";}
.client_message:after {color: red;font-weight: bold;content: "”";}
div.client_message:before {
position: absolute;
z-index: 2;
overflow: visible;
left: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "“";
}
div.client_message:after {
position: absolute;
z-index: 2;
overflow: visible;
right: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "”";
}
div.client_message {
position: relative;
display: inline;
z-index: -1;
}
css has a content property and a :before and :after selector class, you can use these to insert and style the quotes.
note CSS content property is not supported is old IE's less than version 9 http://caniuse.com/css-gencontent
EDIT You have to do a bit of fudging in the CSS but you can get it to work http://jsfiddle.net/wtceu/
EDIT 2 I've put a background-color so that the tails from the HTML entity quotes don't show through the new overlapped quotes. The only issue is if the text takes up more than one line, the ending quote won't position correctly (you can reproduce this by shrinking the width of the jsfiddle window).
Quotes require ‘possessive’ punctuation. In “[Css The Definitive Guide 4][1]”, pp. 786-788, Eric Meyer describes ‘Generated quotes’.
With quotes, you can define quotation patterns to as many nesting levels as you like. In English, for example, a common practice is to start out with a double quotation mark, and a quotation nested inside the first one gets single quotation marks. This can be recreated with “curly” quotation marks using the following rules:
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
<quotation>
<quote>
In the beginning, there was nothing.
And God said:
<q>
Let there be light!
</q>
And <abbr>there’s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>
“In the beginning, there was nothing. And God said: ‘Let there be light!’ And there was light.”
The hypotheses (nor acronyms) used in English abbreviation contractions do not respond to Meyer's simple quotation CSS. That's where ’ and ” are useful, working with the quotation, [abbr and acronnym][2] elements. Note that ABBR element (e.g., WHO) is distinct from the abbr attribute (it's one, he's done).
Note also that Apple device keyboards use Option and Shift-Option keys pressed-together with [ and ] keys to generate English opening and closing curly quotes respectively, in this and many other web environments. Meyer's CSS and simpler Apple keyboard shortcuts work well for ‹other languages›, such as French quotation punctuations.
Other devices and networks may similarly adapt or even block the simple display of HTML and CSS quotation code (and related punctuation). There's nothing wrong with offering HTML/CSS guidance, where appropriate. Curly quote styling can encompass more than simple quotes.
[1]: https://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410. Meyer and Weyl ©2018.
[2]: https://maxdesign.com.au/news/abbreviations/ ...no discussion of block elements that are a foundation of written language quotations. Contraction and quotation, CSS technology character string focus tends to ignore mainstream curly quotes development. Meyer being an important exception.
Clearly we can accomplish far more than most are aware of, without almost scripted neglect in our collective knowledge base. As an aside, it would be nice if Stack quotation marks were more legible.
Moving forward, perhaps to cover our bases better, the CSS should look like this.
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '\201C' '\201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; }
blockquote p::before { content: open-quote; }
blockquote p::after { content: no-close-quote; }
Google finds many people unable to style the simple quotes. Still looking for contraction code: i.e., root’extension possessive single right curly quote styling. Can current DOM handle contraction single right quote without script... what's that trick?