I'm trying to apply this css:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
this works well, the problem is that the web app can set a class on the body called white-content, if the white-content class is setted, then I can't see the text of h2, because the color is white.
Is possible tell to css that the css above must be applied only when the white-content class is not availble on body?
Thanks in advance.
I've condensed the HTML for the sake of this example.
Test 1: Class does exist on body. h2 text should be default black.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body class="white-content">
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
Test 2: Class does not exist on body. h2 text should be white.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body>
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
if you use
body.white-content
that means "body and white-content" class at the same time.
So you can use:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
color: black
}
So when body has .white-content it add that css rule.
See more on
https://www.w3schools.com/cssref/css_selectors.asp
yes it's possible by using DOM manipulation with javascript:
html:
<div id="div01" style="background-color: white">abc</div>
javascript:
if(div01.style.backgroundColor == "white")
{document.getElementById("div01").style.color = "black";}
I want to display the letters of my logo text in different colors, but using span is very rough and using JavaScript slows the page loading time. So I tried to use the CSS pseudo element :before, using multiple classes of same element but it’s not working. It shows only the letter of last class, that is letter4. Here is the code:
.letter1:before {
content:"Z";
color:red;
}
.letter2:before {
content:"O";
color:green;
}
.letter3:before {
content:"N";
color:blue;
}
.letter4:before {
content:"E";
color:purple;
}
And the HTML:
<span class='letter1 letter2 letter3 letter4'> </span>
How do I make it work?
Here you are SIR
demo: http://jsfiddle.net/7UjgL/
the style:
.letter{
width:40px;
height:20px;
position:relative;
letter-spacing: 26px;
}
.letter:first-letter{
color:red;
}
.letter:before,.letter:after{
position:absolute;
top: 0px;
}
.letter:before{
content: 'o';
color: green;
left: 11px;
}
.letter:after{
content:'n';
color:blue;
left: 22px;
}
the markup:
<div class=letter>ze</div>
You should use separate span elements for it because it will be more readable in the long run.
CSS:
.letter1{color:red;}
.letter2{color:green;}
.letter3{color:blue;}
.letter4{color:purple;}
HTML:
<span class='letter1'>Z</span>
<span class='letter2'>O</span>
<span class='letter3'>N</span>
<span class='letter4'>E</span>
Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.
Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?
and while
a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
works great, as soon as i try to change it into
.about a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
it does not function as it's supposed too.
do tags not listen to span formatting or class nesting?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
}
.bottom-left {
position: absolute;
font:sans-serif;
bottom: 15px;
left: 15px;
}
.bold {
font-family: serif;
}
.about {
font-size: 11px;
font-family: sans-serif;
}
/*a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}*/
.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}
</style>
<title>TEMP</title>
</head>
<body>
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</span>
</div>
</body>
</html>
Hi actually you have commented your email link css:-
so now write the css like this method its working fine......
a[href^="mailto:"]
{
font-family: sans-serif;
color: red;
font-size: 11px;
}
see the demo:- http://jsbin.com/ijofoq/edit#html,live
UPDATED
Now its working fine...edit your HTML and add in your HTML
<div class="bottom-left">
<div class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</div>
basically you have to remove the span tag from .about class.
check this :- http://jsbin.com/ijofoq/2/edit
I think .about take precedence over a.
cf. Css Rule Specificity.
Basically, a css ruleset is assign a priority like a version number like this:
{#id}.{#class}.{#element}.{order}
with
{#id} : count of id selectors
{#class} : count of classes, pseudo-classes, attributes
{#element} : count of elements, pseudo-elements
{order} : the index of this rule across all files
So, we have the following order:
0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
0.1.1.a span.about (0 id, 1 class, 1 element)
0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
0.1.0.* .about (0 id, 1 class, 0 element)
span.about and a[href^="mailto:"] have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.
If you remove the span then the rule is less specific and loose.
(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)
Is there any way to force a font to be monospaced using CSS?
By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width?
If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for:
font-variant-numeric: tabular-nums;
(this disables the proportional-nums default value for the numeric-spacing variant supported at least by OpenType fonts, and possibly by other font formats supported by the text renderer of your web browser for your particular platform)
No JavaScript needed! It is the cleanest way to disable the variable-width glyphs in these fonts and force them to use tabular digits (this generally uses in the same glyphs in the same font, but their leading and trailing gap is increased so the 10 digits from 0 to 9 will render at the same width; however some font may avoid the visual variable interdigit spacing and will slightly widden some digits, or could add bottom serifs to the foot of digit 1.
Note that this does not disable the variable height observed with Segoe UI (such as some digits will be x-height only like lowercase letters, others will have ascenders or descenders). These traditional digit forms may be disabled with CSS too, using
font-variant-numeric: lining-nums;
(this disables the default oldstyle-nums value for the numeric-figure variant supported at least by OpenType fonts, and by possibly other font formats supported by the text renderer of your web browser for your particular platform)
You can combine both:
font-variant-numeric: tabular-nums lining-nums;
--
The snippet below demonstrates this using a single proportional font (not monospaced!) featuring shape variants for digits, such as 'Segoe UI' on Windows and shows the different horizontal and vertical alignments produced.
Note that this style does not prohibit digits to change width if different styles like bold or italic is applied instead of medium roman as shown below because these will use different fonts with their own distinct metrics (this is not warrantied as well with all monospace fonts).
html { font-family: 'Segoe UI'; /* proportional with digit variants */ }
table { margin: 0; padding: 0; border: 1px solid #AAA; border-collapse: collapse; }
th, td { vertical-align:top; text-align:right; }
.unset { font-variant-numeric: unset; }
.traditional { font-variant-numeric: proportional-nums oldstyle-nums; }
.lining { font-variant-numeric: proportional-nums lining-nums; }
.tabular-old { font-variant-numeric: tabular-nums oldstyle-nums; }
.tabular-new { font-variant-numeric: tabular-nums lining-nums; }
.normal { font-variant-numeric: normal; }
<table>
<tr><th>unset<td><table width="100%" class="unset">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>traditional<td><table width="100%" class="traditional">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>lining<td><table width="100%" class="lining">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>tabular-old<td><table width="100%" class="tabular-old">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>tabular-new<td><table width="100%" class="tabular-new">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
<tr><th>normal<td><table width="100%" class="normal">
<tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal
<tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal
</table>
</table>
Reference: https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric
Why not think outside the box and inside a table for this:
<table cellpadding="0" cellspacing="0">
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr>
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr>
</table>
You can't do this with CSS. Even if you could, the result will look horrible:
If you really do need to do this, you could use JavaScript to wrap each individual character in an element (or just do it by hand):
function wrap_letters($element) {
for (var i = 0; i < $element.childNodes.length; i++) {
var $child = $element.childNodes[i];
if ($child.nodeType === Node.TEXT_NODE) {
var $wrapper = document.createDocumentFragment();
for (var i = 0; i < $child.nodeValue.length; i++) {
var $char = document.createElement('span');
$char.className = 'char';
$char.textContent = $child.nodeValue.charAt(i);
$wrapper.appendChild($char);
}
$element.replaceChild($wrapper, $child);
} else if ($child.nodeType === Node.ELEMENT_NODE) {
wrap_letters($child);
}
}
}
wrap_letters(document.querySelectorAll('.boxes')[0]);
wrap_letters(document.querySelectorAll('.boxes')[1]);
.char {
outline: 1px solid rgba(255, 0, 0, 0.5);
}
.monospace .char {
display: inline-block;
width: 15px;
text-align: center;
}
<h2 class="boxes">This is a title</h2>
<h2 class="boxes monospace">This is a title</h2>
I've just found the text-transform: full-width; experimental keyword, which:
[...] forces the writing of a character [...] inside a square [...]
text-transform | MDN
Combined with negative letter-spacing, you can get not-so-horrible results:
<style>
pre {
font-family: sans-serif;
text-transform: full-width;
letter-spacing: -.2em;
}
</style>
<!-- Fixed-width sans-serif -->
<pre>
. i I 1 | This is gonna be awesome.
ASDFGHJK | This is gonna be awesome.
</pre>
<!-- Default font -->
. i I 1 | This is gonna be awesome.
<br>
ASDFGHJK | This is gonna be awesome.
Well, you didn't say using only CSS. It is possible to do this with just a little bit of Javascript to wrap each letter in a span. The rest is in CSS...
window.onload = function() {
const secondP = document.getElementById('fixed');
const text = secondP.innerText;
const newText = text.split('').map(c => {
const span = `<span>${c}</span>`;
return span;
}).join('');
secondP.innerHTML = newText;
}
p {
position: relative;
border: 1px solid black;
border-radius: 1em;
padding: 1em;
margin: 3em 1em;
}
p::after {
content: attr(name);
display: block;
background-color: white;
color: green;
padding: 0 0.5em;
position: absolute;
top: -0.6em;
left: 0.5em;
}
#fixed span {
display: inline-block;
width: 1em;
text-align: center;
}
<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
In a paragraph with regular text, it looks terrible, but There are instances when this makes sense. Icon fonts and Unicode symbols could both make use of this technique.
I found this question while trying to find a solution for Unicode symbols that were shifting regular text to the right when they were replaced with other Unicode symbols.
I've done a verry pretty thing sometimes for countdowns:
HTML:
<div class="counter">
<span class="counter-digit counter-digit-0">2</span>
<span class="counter-digit counter-digit-1">4</span>
<span class="counter-digit counter-digit-divider">/</span>
<span class="counter-digit counter-digit-2">5</span>
<span class="counter-digit counter-digit-3">7</span>
</div>
SCSS:
$digit-width: 18px;
.counter {
text-align: center;
font-size: $digit-width;
position: relative;
width : $digit-width * 4.5;
margin: 0 auto;
height: 48px;
}
.counter-digit {
position: absolute;
top: 0;
width: $digit-width;
height: 48px;
line-height: 48px;
padding: 0 1px;
&:nth-child(1) { left: 0; text-align: right; }
&:nth-child(2) { left: $digit-width * 1; text-align: left;}
&:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
&:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
&:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}
You can wrap the seconds digits in a span and style it like...
.time-seconds {display: inline-block;width: .52em;text-align: center;}
See Snippet.
function padlength(what) {
var output = (what.toString().length == 1) ? "0" + what : what;
return output;
}
function displaytime() {
var serverdate = new Date();
var dd = "am";
var hh = serverdate.getHours();
var h = hh;
if (h >= 12) {
h = hh - 12;
dd = "pm";
}
if (h == 0) {
h = 12;
}
h = parseInt(h);
var sec = String(padlength(serverdate.getSeconds()));
var timeFixed = h + ':' + padlength(serverdate.getMinutes()) + ':<span class="time-seconds">' + sec.charAt(0) + '</span><span class="time-seconds">' + sec.charAt(1) + '</span> ' + dd;
timeVariable = h + ':' + padlength(serverdate.getMinutes()) + ':' + sec + ' ' + dd;
document.getElementById("servertime-fixed").innerHTML = timeFixed;
document.getElementById("servertime-variable").innerHTML = timeVariable;
}
window.onload = function() {
displaytime();
setInterval("displaytime()", 1000);
};
center {
font-size: 3em;
font-family: Cursive;
}
.time-seconds {
display: inline-block;
width: .52em;
text-align: center;
}
<html>
<body>
<center id="servertime-fixed">H:MM:SS mm</center>
<center id="servertime-variable">H:MM:<span class="time-seconds">S</span><span class="time-seconds">S</span> mm</center>
</body>
</html>
i just had the same problem. my font didn't support font-variant-numeric: tabular-nums (which i knew about) and the other solutions didn't suit me, so i came up with this one - in my case i just had to expand letter spacing and then squash the (gigantic) zeros to make it look acceptable:
CSS:
.squashzeros { letter-spacing:.2em; }
.squashzeros span { display:inline-block; margin:0 -.09em; }
JS:
document.querySelectorAll('.squashzeros').forEach((o)=>{
o.innerHTML = o.innerText.replaceAll(/0/g,'<span>0</span>');
});
unfortunately i found no css-only solution.
No, not unless it's an actual mono-spaced font.
A mix of answers from Márton Tamás and nïkö:
document.querySelectorAll('pre').forEach( o => {
o.innerHTML = o.innerText.replace(/(.)/g, '<i>$1</i>');
});
pre i {
font-style: normal;
font-family: serif;
display: inline-block;
width: 0.65em;
text-align: center;
}
<!-- Fixed-width serif -->
<pre>
. i I 1 | This is gonna be awesome. 12:10
ASDFGHJK | This is gonna be awesome. 08:51
</pre>
<!-- Default font -->
. i I 1 | This is gonna be awesome. 12:10
<br>
ASDFGHJK | This is gonna be awesome. 08:51
No, there is no way to force anything in CSS. And there isn’t even a way to suggest that a non-monospace font be rendered as a monospace font.
Can we write selectors by only name
For example,
<div name= "outer-name">
<img name="inner-image" src="images/ine.jpg" alt"" />
</div>
I want to take style of inner-mage in css file like [outer-name] [inner-image]
In CSS file
[outer-name] [inner-image] {
/*styles*/
}
I cant take selector as [outer-name] img etc .. only selecting by name
You can use attribute selectors:
[name="outer-name"] [name="inner-image"]
But keep in mind that name is not a valid attribute for <div> or <img>, even though the above selector will work. It's best that you either change them to classes, or if you're using HTML5, add the data- prefix to them, so it looks like this:
<div data-name= "outer-name">
<img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>
Then use this selector:
[data-name="outer-name"] [data-name="inner-image"]
Given the following html:
<div data-name="something">
<p>Content in 'something'</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name] [data-someAttribute] {
display: block;
background-color: #ffa;
}
This is perfectly valid (or, at least, it's implemented in Chromium 14/Ubuntu 11.04). I've changed from using name attributes (since they're invalid for div elements, or other non-form elements), and used, instead, data-* prefixed custom attributes, which are valid in HTML5 and, while perhaps not 'valid' in HTML 4, they seem to be understood by those browsers still.
JS Fiddle demo.
It's worth noting that you can also use attribute=equals notation, to select only certain elements based on the value of their data-* attributes:
<div data-name="something">
<p>Content in data-name='something' element.</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name="something"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
Also, if CSS3 is an option for you, it's possible to use attribute-begins-with (^=) notation:
[data-name] {
background-color: red;
}
[data-name^="s"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
And attribute-ends-with ($=) notation:
[data-name] {
background-color: red;
}
[data-name$="ing"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
References:
data-* attributes (W3.org).
data-* attributes, (HTML5 Doctor).
attribute-equals selector (W3.org).
attribute-starts-with, and attribute-ends-with selectors (W3.org).
As #Bolt said, name isn't valid there (yet it still works on my browser). You can use the HTML5 data- properties. Here's a fiddle showing how it's done.
The real solution here would be to use classes, but I assume you have a reason for not using them.