I've read through all the other posts on this topic but non seemed to help.
When I have:
.tb-megamenu-submenu .dropdown-menu .mega-dropdown-menu .nav-child{
left:50% !important;
}
It doesn't add the style to the element.
But If I use it inline it works:
<div data-class="increase-background-about" data-width="0" class="tb-megamenu-submenu increase-background-about dropdown-menu mega-dropdown-menu nav-child" style="left:50px">
I'm completely stumped and the other questions haven't helped.
Remove all the spaces and try. It should work!
.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{
left:50% !important;
}
The issue with your styling is that all the classes you mentioned are for the same element.
So to target them you need to do it like I've done above - without spaces.
Your styling would work when these classes are descendants
i.e. .tb-megamenu-submenu -> .dropdown-menu -> .mega-dropdown-menu -> .nav-child
Arrow represents the parent-child relation.
Learn basics of CSS from here.
Your selector is wrong. That is actually looking for a .nav-child element, inside a .mega-dropdown-menu, inside a .dropdown-menu, inside a .tb-megamenu-submenu. You should remove the spaces in your selector:
.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{
left: 50%;
}
Please do not use !important. It makes your code very hard to maintain. Instead, try to write more specific selectors (incidentally, this should be specific enough).
You are trying to specify your element through multiple classes right? But by putting spaces between the selector you are actually getting descendants:
.tb-megamenu-submenu
. dropdown-menu
.nav-child <- getting this element
To get the right result you should concotenate the .classes without spaces between, like:
.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child {
left:50% !important;
}
Related
I have a web page, which I need to change its CSS. At the moment, I need a quick fix to an annoying issue. There are some HTML elements that use several CSS classes like the one below.
<ul class="core nested-level">
The problem is that "core" is defined in many places with different rules; hover, ul, *, etc. One of these rules for some reason cause "nested-level" to be disabled as chrome developer tool annoyingly keep showing up.
Any idea how to quick fix this issue or to force this style to override the already defined one (if it exists) ? I tried out the style below, but it didn't show up properly:
.nested-level {
padding-left: 62px;
}
It seems that you defined a rule in your "core" css class for a specific HMTL element. For instance:
ul.core{
padding-left: 0px;
}
Then in your "nested-level", assumingly, you tried to define a rule for the same property.
The way to fix it is either to avoid defining your css rule based on an HTML element, or to use the "important" keyword when defining your css rule, as this
.nested-level {
padding-left: 62px !important;
}
This will fix your issue.
better is dont use !important.
Read More: https://j11y.io/css/dont-use-important/
add ID in Element tag . id Selector have Higher priority than class Selector
<ul id="myId" class="core nested-level">
and use css Like :
#myId {
padding-left: 62px;
}
When I want to define css selector with :hover and :active I have to do:
#mainPage #content div.group:hover, #mainPage #content div.group:active {}
As one can see it contians repeated #mainPage #content div.group and can get messy. Is there a way to group it somehow like:
#mainPage #content div.group:hover:active {}
In pure CSS there is not much of a better way to handle both more succinctly without adding a class or ids.
You could consider a CSS pre-compiler (like LESS or SASS/SCSS).
In LESS or SCSS:
#mainPage #content div.group {
&:hover, &:active {
color: red;
}
}
I suggest add ID for the element has class group and write below code will reduce the effort:
#idname.group:hover, #idname.group:active{}
Is there a reason why you're using #mainPage #content before div.group?
Generally, it's not necessary to add that much 'specificity' to your selectors - it's better to instead, have unique classes. So make sure that the class .group is only used for elements that you want to have the same styles.
If you do that, you should be able to style those elements just using
.group { styles here}
You might run into an issue now where if you try to override any of the styles you set like #mainPage #content, those will be more specific and so in effect 'stronger' than styles where you don't use the full list of parents. If possible, change all your styles not to include the parent elements - this is also worthwhile in case you ever want to move an object to a different part of the html!
It's also, in general, advisable not to use id's (#name) to attach css styles - if possible, just use classes. Unless you're doing javascript, you shouldn't have much need for id's.
Obviously there exceptions to the above, and for all I know you may have a perfectly good reason for doing things the way you have - in which case SASS (as suggested in a few other answers) is a good solution for you.
If not useful for you, I hope at least this answer might be useful for someone who might come along later - I've noticed that a lot of people newer to css don't realize how specificity of selectors works and end up making their styles a lot more complicated than necessary as a result! :)
Old question, but this should be relevant for somebody who needs this.
Pseudo-class released by the end of 2020
You can use :is() pseudo-class like so :
#mainPage #content div.group:is(:hover, :active) {
}
Here is a little snippet to picture it :
a:is(:hover, :focus) {
color: red;
outline: #5bc8ea dotted 4px;
outline-offset: 4px;
font-weight: 600;
}
Hover/Focus me
More informations about :is() pseudo class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:is and here: https://css-tricks.com/almanac/selectors/i/is/.
Works with most of the popular browsers (incompatible with IE, Opera and Safari < 14) https://caniuse.com/css-matches-pseudo.
It surely is more often used to select elements than pseudo-classes like :hover or :focus but it will do the trick as I can't see any other solution for now.
Why you use #mainPage #content? #content should be enough to find the div your looking for without the #mainPage.
Also id's are only allowed to be used once and not in multiple places like classes are. Id's are usually reserved for script assignments and not CSS. I would do
#content .group:hover{}
#content .group:active{}
if i understood correctly, you want a group of elements to act a certain way? manipulate the parent class then.
.parent-class:hover {
.child-class {
…desired styles go here
}
}
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;
}
Having trouble understanding.
With the following css :
.bloc .field:nth-last-child(2){ ...some values... }
and the following html (well, haml) :
.bloc
.field
.field
.field
.field
.clearfix
The .clearfix div gets counted in the selector, from this I can't get the good .field's div to be specifically styled.
It seems a bug to me, but I might be wrong. The same kind of problem applies for nth-child.
The big misunderstanding here is how filtering using :nth-child() works.
.bloc .field:nth-last-child(2) means:
"select all second-to-last elements that have the .field class that are inside a .bloc".
It does not mean:
"select all second-to-last .field elements that are inside a .bloc".
With this understanding, you could just change your selector to .bloc :nth-last-child(3).
However, the second paragraph of bažmegakapa's answer makes a lot of sense. You should just remove the .clearfix element and use a different float containment technique. The "micro clearfix" is a good choice. Another option is to add overflow: hidden to .bloc.
Simply remove the clearfix div. The :nth-last-child() and :nth-last-of-type() selectors do not work the way you expect. They will not make a distinction on class names (the first does not make a distinction, only counts from backwards, the second only makes a distinction on element type).
There are thousands of clearing techniques and only some of them require adding markup. Simply overflow: hidden or overflow: auto on the container. If you can use :nth-last-child you could also use a clearing technique that employs ::after.
You are selecting an element with that class if it's a :nth-last-child(2).
You could achieve what you really want, if you were using a different type for the .field and .clearfix elements, with :nth-last-of-type().
Try this, seems to be getting the one before .clear for me:
.bloc .field:nth-last-child(2) { color: #CC0000; }
http://jsfiddle.net/clowerweb/Dp3yW/
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.