In CSS, I am trying to style an ordered list so that the contents are one font, but the the numbers are another font.
How can I target the list-numbers, which aren't html elements and part of the list-style ?
The only thing that I can think of and have tried is making the list an unordered list. Setting the list-style to none and then manually having numbers inside the list that are wrapped in 's where I style them differently.
But that seems highly inefficient.
HTML
<ol>
<li><p>Hello</p></li>
<li><p>World</p></li>
</ol>
CSS:
ol{
font: italic 1em Georgia, Times, serif;
}
ol p{
font: normal .8em Arial, Helvetica, sans-serif;
}
JSFiddle of the example above
Related
A lot of sites use the ::before selector on an element to load icons via a client-downloaded font file, e.g.
div {
font: 14px/1 FontAwesome;
}
div::before {
content: "\f1c8";
}
Unfortunately the following rule also applies to the element's ::before pseudo-element, which breaks the icon display:
div {
font-family: sans-serif !important;
}
It's not possible to :not(::before) (source), so how would you go about targeting an element, but not it's ::before?
This worked decently, but it misses the text (if any) inside the element:
div:not([class*="fa-"]) {
font-family: sans-serif !important;
}
It may not even be possible. No JavaScript, please.
It's not possible without then again overwriting the before and after again
div {
font-family: sans-serif;
}
div::before,
div::after {
font-family: serif;
}
Or you could just use the icon in another element entirely.
<span class="fa-something"></span>
<span>Text here</span>
And a s a sidenote :)
Please use textelements for text, not divs (and span is also not a text element, it simply is an inline element without any semantic information)
With #Termani's help above, this is how I solved the problem of injecting my preferred font into websites while doing minimal damage to most site's icons loaded via webfont files:
::before, ::after {
font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
"Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}
Without doubt there are other font-family names that developers use, so the list will grow as I stumble upon them.
I'll update this answer if I find a better solution.
In CSS, how can I bold only the phone number so it will inline with the rest of the statement but the number is bold?
Instead of doing it in HTML as:
<div class="bubbleContent">› Start posting jobs today–
<strong> 01234 567 890</strong></div>
HTML:
<div class="content">› Call me – 01234 567 890</div>
CSS:
div.bubbleContent
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
Thanks.
You can use <span> as in example shown below:
HTML:
<div class="content">› Call me – <span class="highlight">01234 567 890</span></div>
CSS:
div.content
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
span.highlight
{
font-weight:bold;
}
You can also use <div> element with property display:inline, so it will be inline with the rest of the text.
You can’t. You cannot style a piece of text in CSS without making it an element one way or another (unless it can be referred to as a pseudo-element, but this currently works for first letter and first line only).
There are many HTML elements that you could use (such as strong, b, span), but the point is that you need some element. You can use an element that is displayed in bold by default, or you can style it with CSS.
You could generate the element with JavaScript client-side, though. For this, you would need to specify the syntax of phone numbers to be recognized, making sure that only phone numbers will match it in the content that will be used.
I'm having some trouble lining up some text. I need two columns, one with numbers and one with text, like so:
1 Entry one
2 Entry two
3 Entry three
4 Entry five
5 Entry six
The left column is Georgia and the right column is Arial (slightly different font sizes). I could have a container div for each row and absolutely position the number and text paragraphs to be at the top or bottom of these, which works fine. The problem is this means I have to give each row a fixed height so that it displays properly, which causes a problem if the text needs to flow onto more than one line (which it may well do as the text entries are dynamic).
I want to do this without using a table, and without using absolute positioning so that the individual text entries can span over more than one line (and is cross-browser compatible).
As per my comment, I think the best element for the job is an ordered list.
ol {
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}
ol li span {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 12px;
}
<ol>
<li><span>Entry one<br>text on another line</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
</ol>
With the span to allow changing of font-family between the list "bullets" and the content within, these could be divs if you have block content.
You should just use an appropriately styled ol element, something like this:
See: http://jsfiddle.net/tPjQR/
If you want to have different styles on the number versus the list content, you'll need to wrap the content of each li in something like a span. There just isn't a better way.
ol {
font-family: Georgia, serif;
}
ol span {
font-family: Arial, sans-serif;
font-size: 17px
}
<ol>
<li><span>Entry one</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
<li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>
Is there anyway to bold the decimals in an ordered list using CSS only? The CMS we are using is spitting out li's with no nested p/span/header tag so I can't bold the li and reset the nested tag...
Any ideas?
thanks
you may use :first-line pseudo-element for the li, like
li {
font-weight: bold;
}
li:first-line {
font-weight: normal;
}
It works for the latest versions of modern browsers, except IE.
For IE you need to use scripting to add nested tag for the li's
I'm guessing not because I've been trying it with examples and nothing works...
I'm curious why not? And how can I set this?
Thanks
Sure you can. Just as for any other HTML element.
ul li { font-family: Arial, Sans-Serif }
Note that if the li contains other elements, and those elements have their own font-family settings, the value may get overridden. In that case, you'll have to specifically target the elements inside the li, e.g. for links:
ul li a { font-family: Arial, Sans-Serif }