A colleague just added this to our project.
<ol class="numbered-list list-inside" start="1">
.numbered-list
{
list-style-type: decimal;
}
.list-inside
{
list-style-position: inside;
}
Am I missing something here or is this just as bad as inline CSS? How do I explain this to my colleague?
Edit Perhaps my question is misunderstood. Shouldn't it be something like this instead?
<ol class="info-list" start="1">
.info-list
{
list-style-type: decimal;
list-style-position: inside;
}
The point I'm trying to make is, the class names just represent the rule they apply. So if you want to change the representation of the list, you have to change the HTML (or change the CSS so you end up with a class name that does the opposite of the rule it contains).
Another edit Perhaps this will further help you understand my question.
<p class="red">Hello</p>
.red
{
color: red;
}
Now, you want to change the text to be green. See the issue?
If those classes are used separately in rest of your project this is ok. If there is no need to separate those styles such solution can be unnessesery.
Many times you add to one element several classes if they are used for different purposes.
An article confirms my doubts about this style. The most relevant example is this one:
<div class="hyphenate"></div>
Unsemantic. Trying to specify the behavior of the content inside, instead of describe what it actually is.
Related
I was asked to take over a company's website built using a builder I'm not familiar with.
I need to remove a few buttons, tabs, etc. (The site needs to be rebuilt.) Until we get the green light I'm having to remove items here and there with CSS.
I was able to remove the following button
"Rental"
with the following:
a.search-btns[data-search=rental] {
display: none;}
But I trying to remove this tab
<li class="tab"> Rental</li>
does not work using this method.
a.tab[data-tabtitle=Rental Equipment] {
display: none;}
I know just enough about CSS to be dangerous. Can someone help with this?
Thanks in advance!
Change css code to:
li.tab a[data-tabtitle="Rental Equipment"]
{
display: none;
}
In some CSS contexts, spaces are optional. For example, in a property declaration display:none; is the same as display: none;. However, as you can see in your selector scenario, they do matter.
a.tab[data...] is selecting for all links that have the class .tab and the data-attr you specified. For your scenario to work, you want something like: tab > [data...]
.tab > [data-tabtitle="demo"]{
display: none;
<ul>
<li class="tab">hidden</li>
<li class="tab">not hidden</li>
</ul>
I suggest checking out some documentation on CSS selectors to learn more.
https://www.w3schools.com/cssref/css_selectors.asp
Try changing it to double quotes.
a.tab[data-tabtitle="Rental Equipment"]
I am trying to organize and structure our applications better with LESS and I'd like to know the best route in doing a task using "!important". Currently we have a lot of these and I'd like to get rid of them if it makes sense. My example is:
<div id="test">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<button id="button">
Select
</button>
$('#button').on('click', function(){
$('#test li').toggleClass('blue');
})
Option 1:
#test {
ul{
li{
color: red;
}
.blue{
color: blue;
}
}
}
So with LESS, if I have the class after the initial color, it should over take. If I want to add the blue class, then I would insert it into each area within the LESS file, or do:
Option 2:
#test {
ul{
li{
color: red;
}
}
}
.blue{
color: blue !important;
}
In this case I would have it listed once, and then whenever it is called it will override the class. Or have an Option 3 if someone thinks there is something better than these two. I'm not sure what the best route is, but I'd like to get rid of !important if possible.
I subscribe to the view that you should only use !important as a temporary fix while you refactor your styles. Clearly you have a specificity problem to address (which your example doesn't quite demonstrate). In your example, I would first do Option #2 (if it was hard enough to figure), then refactor overrides like .blue into a style which is loaded last.
https://jsbin.com/cekobodixe/edit?html,css,js,output
If we change it slightly we reach a common problem: the use of id doesn't allow cascading precedence by load order:
https://jsbin.com/xikolenevo/1/edit?html,css,js,output
and so that suggests a second factor to the fix, replacing ids with classes.
Another thing that might happen is that a set of rules for a specific component were added to an override stylesheet instead of to the component. So now, the rules are overriding otehr components as well. The solution here is to relocate the offending styles to their respective components. This can get ugly fast, so its best to do this early.
The only thing I could think of is making two different classes, one red and one blue. Set the li objects in your html to .red and changing the class on click. But I don't think that's a very pretty solution.
Otherwise I think you have to stick to your !important.
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.