I'm creating a navigation bar and its made using an unordered list. I want to override my style for the first one so it looks different. I tried changing its class, but the actual style overrides it. Thanks
CSS is order-sensitive.
If you define the styles for the first element, and then define the styles for all elements, then the styles for all elements will take precedence, even for the first element.
Alternatively, if you define the styles for all the elements first, and then define the styles for the first element, then the styles for the first element will take precedence over the styles for all elements when the browser gets around to figuring out how to render the first element.
In the style declarations, use !important, like this:
.myFirstOne {
color: blue !important; /* for example */
}
Make sure you put the !important last. Is there a way you can factor the attributes out of the style attribute and into a class? That would be a cleaner and less tedious way of doing it, as !important must come after every declaration.
See this link for more information on CSS cascading rules.
I don't perfer using !important I'd rather put a class on the first element and style it as such:
<!-- html -->
<ul>
<li class="first">first item</li>
<li>second item</li>
<li>third item</li>
</ul>
/* css */
ul li {
color: blue;
}
ul li.first {
color: red;
}
Related
In the code, there are two links and I want to implement different hover effects for both the links (i.e if I hover over I want to buy the link should become red and if I hover over the link I want to sell It should become blue). Please guide me on how I could achieve it
Here is the part of the code:
<ul>
<li><Link to='/buyer'>I want to buy</Link></li>
<li><Link to='/seller'>I want to sell</Link></li>
</ul>
In case if I used an anchor tag I could have used a: hover but was unable to find what to do in the above case.
Define class name to the <li> tag, then by using CSS Descendant Selector (a whitespace), you can reach the <a> tag:
.classNameOfLiTag a:hover {
// styling
}
Descendant selector can select any descendant elements wrapped under <li> regardless how deep. To be more precise, you can use child selector (>) that selects only <a> tag that is directly the children of <li> like so:
.classNameOfLiTag > a:hover {
// styling
}
In your js file:
<ul>
<li><Link to='/buyer' className={class1}>I want to buy</Link></li>
<li><Link to='/seller' className={class2}>I want to sell</Link></li>
</ul>
In your css:
.class1:hover {
color: red;
}
.class2:hover {
color: blue;
}
You can add different class to li and then give it hover styles
<ul>
<li className="link1"><Link to='/buyer'>I want to buy</Link></li>
<li className="link2"><Link to='/seller'>I want to sell</Link></li>
</ul>
CSS
.link1:hover{
// your style
}
.link1:hover{
// your style
}
I’m using an internal CSS style sheet to define styles for my <ol> and <li> elements. However, for one list which I have, I’d like to use inline styling. I want the list elements to be one color (blue) and the list bullets to be another (red). If I was to use an internal style sheet, the following would accomplish this for the list in question:
<style>ol { list-style-type:upper-roman; color:blue; } ol li span { color: red; } </style>
But I can’t figure out how to do this using inline styling. I don’t want to style each <li>. This following works to apply just one color for everything:
<ol list-style-type:upper-roman; style="color:blue;">
<li><span>Apple</span></li>
<li><span>Orange<span></li>
<li><span>Pear<span></li>
<li><span>Grape<span></li>
</ol>
But I don’t know how to add in the part to the inline styling statement which in the inline style sheet is:
ol li span { color: red; }
in order to color the list items different than the bullets, without coding each list item itself.
You're going to have to be very specific and deliberate. That's the way inline styles work. You apply them directly to each and every element. You can get away with some inheritance but if you need to override that inheritance then you'll have to manually override it for each and every element.
<ol style="color:blue; list-style-type:upper-roman;">
<li><span style="color: red;">Apple</span></li>
<li><span style="color: red;">Orange</span></li>
<li><span style="color: red;">Pear</span></li>
<li><span style="color: red;">Grape</span></li>
</ol>
I always modify Bootstrap by including my custom stylesheet after the Bootstrap one, in this particular case, like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mainstyle.css" rel="stylesheet">
I have a list on the site, some of whose elements also have the class advanced-only.
The list elements have the style in Bootstrap:
.nav > li {
position: relative;
display: block;
}
And the advanced-only class in my custom stylesheet has:
.advanced-only {
display: none;
}
There are other styles such as color and border but they are not relevant here. As you see, the advanced-only elements should be hidden when the page loads, but they are displayed. When I inspect one of these elements, I see that the .advanced-only style is crossed out and the .nav li style from Bootstrap is active. When I deactivate the Bootstrap one from there, then the custom one activates and all is well.
Also, when I do
.advanced-only {
display: none !important;
}
it hides it like it should. However, this would interfere with a bunch of Javascript code (for example, show() and hide() won't work properly with !important elements) so I would like to understand why Bootstrap is overriding the custom style and what I can do about this.
The HTML looks like this:
<ul class="nav nav-sidebar">
<li>
<a>Pending Actions</a>
</li>
<li class="advanced-only">
<a>Hidden stuff</a>
</li>
</ul>
That is because the specificity of your selectors are lower than the Bootstrap selectors. Strongly suggest you reading http://www.w3.org/TR/CSS2/cascade.html#specificity.
The specificity is calculated based on many factors, not just by the order of definition.
For example, this selector .nav > li has an attribute selector and a tag selector, while your rule .advanced-only has only an attribute selector. So your rule is not making affect. Try to make your selector more specific when giving customized styles.
This is because bootstrap's styling is more specific than your custom styling.
To fix this you need to add a more specific selector, e.g:
nav .advanced-only {
display: none;
}
For more reading on CSS Specifity check out this link.
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
ul:nth-of-type(3) {
border: 1px solid black;
}
There will be times when, rather than selecting a child, you instead need to select according to the type of element.
Imagine mark-up that contains five unordered lists. If you wanted to style only the third ul,
and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.
I have the above didn't work
dropmenu
<li class="submenu">
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
The list above is dynamicly generated by a php script and I can't change the class names therefore when I apply styles to the ul element ,it is the same for all.
Thanks for all help
Which browser are you testing this in because the pseudo-class :nth-of-type(n) is not supported across all browsers. For example, it is not supported in Internet Explorer.
is it possible to remove the .level2 from the ul tags and replace with <ul class="level2">? Then your css should work.