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
Related
I just got done with my first proper web design (which was for my own site) and I've styled the first line and letter of the p tags for my articles and they work just fine, but the first letter and line of blockquotes also inherit that style and I'm simply not able to change it.
I have a feeling I'm missing something simple here. For instance, look at the blockquotes on this page.
I've tried explicitly styling the first line and letter of the blockquote but it does not seem to work. For what it's worth, I'm using first-of-type right now; I've also tried first-child but to no avail.
Update: Here's a jsfiddle --- http://bit.ly/1j70PCT
Either use the :not() pseudo class to prevent the blockquote element from being styled in the initial declaration:
.entry-content :not(blockquote) p:first-of-type:first-letter {
font-size: 2em;
}
..or overwrite the styling with a more specific selector:
.entry-content blockquote p:first-of-type:first-letter {
font-size: inherit;
}
blockquote > p:first-letter {
font-size: inherit;
}
I've styled links using CSS like the example below.
This is working as expected in Chrome however with IE8 I'm having this problem:
When you first visit the page all links do not have underline as expected.
If I hover on them they get underlined as expected.
If then visit the link the underline disappears as expected however if I again hover on them I don't get the underline anymore.
Any ideas...?
Thanks
a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link first, then :visited, then :hover, then :active for consistent cross-browser results.
Additionally, any style applied to :link doesn't need to be reapplied to :visited, :hover, or :active unless you want to override it with a different value. For example, when you declare text-decoration:none for :link, you don't need to put that in any other definitions except for :hover, where you want to override it to none. Since all of the styles except for :hover are the same, you can kind of bypass the LVHA order here:
a:link, a:visited, a:active {
color: #0064cc;
font-family: Arial;
font-size: 13px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Hope this helps!
Edit
Although your issue isn't related to your use of !important, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.
Try to list the different selectors in the correct order.
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Also, you should not use !important. This can cause you problems later.
Src: http://www.w3schools.com/css/css_link.asp
Just have a read about CSS selectors specificity, and reorder your styles rules:
http://www.w3.org/TR/css3-selectors/#specificity
And try to avoid !important like the Devil avoids the Cross.
I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?
<style>
#rank li{
font-size:50px;
font-style: italic;
font-family: serif;
font-weight: bold;
width:70px;
margin-right:10px;
text-align:center;
}
</style>
<ol id="rank">
<li>
<div class="profile">
<!-- contains complex stuffs including tables, floated div for displaying profiles-->
</div>
</li>
</ol>
EDIT:
Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.
Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.
One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :
ol {
list-style-type : none;
}
ol > li:before {
content : counter(list_counter) " ";
counter-increment : list_counter;
float : left;
font-family : verdana;
}
ol:first-child {
counter-reset: list_counter;
}
You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.
Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/
As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.
I understand how to change the description of an active <li> element
li:active {
...declarations...
}
But how can I change all the other elements that are NOT active?
For example, all my elements are in bold, but when I select one of them, all the others are changed back to normal.
Thanks!
I'd imagine li:not(:active) should at least theoretically work.
Apply a rule to ALL of them, then apply a different rule to the active.
li {
color: blue;
}
li:active {
color: red;
}
Result: the un-active ones are blue.
After rereading your question, I think the real answer is that you can't use CSS alone to control how the elements behave on user interaction.
I realize that this won't work because the styles are applied immediately, and elements in the DOM are typically not :active by default:
li {
font-weight: bold;
}
li:not(:active) {
font-weight: normal;
}
Plus, :not() is a CSS3 pseudo-class, so support for it is rather poor right now if you have to account for older browsers.
Maybe you can do this with JavaScript (I use jQuery here)...
$('li').click(function() {
$(this).siblings().css('font-weight', 'normal');
});
If I understand correctly this should do it,
li{ font-weight:bold; }
:active li{ font-weight: normal; }
:active li:active{ font-weight: bold; }
So basically you want an active state on the parent which switches everything to normal and then override that for the li that is also active.
To expand Brad's answer based on your example:
You want all <li>'s to be bold, until one is clicked, right? Start off with:
li {
font-weight: bold;
}
Then, if a list item is clicked keep that one bold but make the others regular:
li:active ~ li {
font-weight: normal;
}
The ~ selects all elements that are siblings of the active li, without selecting the active one itself.
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?