CSS error : Name of overqualified element should be removed - html

Consider this css, which make all elements in form and with mask-amount class become bold:
form .mask-amount {
font-weight: bold;
}
Of course the above will not change the font weight of mask-amount elements outside form.
This will not be bold <span class="mask-amount">123,456</span>
<form>
This will be bold <span class="mask-amount">123,456</span>
</form>
Code At: http://jsfiddle.net/a9qt8jw7/
However when I review my css with Sonar, I get this error Name of overqualified element should be removed. The error described at https://github.com/CSSLint/csslint/wiki/Disallow-overqualified-elements In brief
Writing selectors such as li.active are unnecessary unless the element
name causes the class to behave differently. In most cases, it's safe
to remove the element name from the selector, both reducing the size
of the CSS as well as improving the selector performance (doesn't have
to match the element anymore).
I don't want the other elements with mask-amount class be bold and so I cannot simply remove the form from css selector.
I used this kind of selectors a lot. I want to know what is the best way to change my css and fix this error. (I can not change my htmls, this will be a HUGE task!!)

Related

Why do my CSS don't apply on my html code?

I tried to solve this but I'm still blocked on an error like this lol.
I don't understand why my CSS does not apply to my HTML elements.
a{
text-decoration: none;
}
.test{
text-decoration: none;
}
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
I first tried with only the balise in CSS and after it doesn't work I tried with the "test" class. But it still doesn't work.
The other CSS of my page work. It is only on my balise ..
if anyone have an idea on how to solve my problem pls!
Thanks,
So, the behavior you experience is that defining CSS rules separately, based on the tag name or class name are not applied, yet, if you specify your CSS as an attribute value, then it's applied. Let's think together:
Rule by tagname
a{
text-decoration: none;
}
You reasonably expect this rule to be applied on the anchor, but it's not the case. This evidently means that some other CSS rule (or Javascript) overrides it. Browser Dev Tools can aid you, just right-click anywhere on your page and click on Inspect (or a similar choice). Inside the Dev Tools panel you should see an Elements tab, which shows the HTML and clicking on elements you should see CSS rules on the right-hand side, like on the picture below:
So, I advise you to click on the anchor where you expect your rule to be applied and see what CSS applies there. The rule that you intend to specify here will appear striked through, because something with higher priority overrides it (another case is that a rule with similar prio level is evaluated later and overrides this one). You should be able to see which text-decoration rule is applied and you can gently hover on that rule and click on its checkbox to disable it for now. This will enable the rule applying on this attribute with the second priority level in the hierarchy and so on. This process is not yet a solution, it's exploring the problem. After this exploration you will know what the problem is.
Rule by class
.test{
text-decoration: none;
}
The situation is either similar with the one described in the previous section (rule override due to higher priority or similar priority but later in the code), or, it's possible that for some reason the test class is removed from the tag. So, in the Elements tab of the browser console you will see whether that element still has the class. If not, then experiment by editing the tag and writing that class into it and see whether your rule applies or not. If the tag has the class, but the rule does not apply, then we have a similar issue as the one described in the previous section.
Solution
The best solution is to find out what the problem is, why are there other rules applied on this element and act accordingly. For now, you can apply a rule like
a.test#test {
text-decoration: none;
}
and of course add test as an id to your tag, as below:
<a href="#" class="test" id="test">
and if this still doesn't work, then there is a high chance that the other rule which causes you trouble has !important. If that's the case, then try removing the other rule. If that's not an option, then look at what the selector of the other rule is and make sure that the selector of your tag contradicts it.
It wasn't immediately clear from your initial post exactly what display problem was occurring. But in your comments you indicated an undesired text decoration is showing up, presumably in one of the html elements. Your initial post appears to show your initial efforts to correct the undesired decoration by re-defining the a element's css in your style.css sheet, which is intended to override the bootstrap css.
But your problem really appears to be related to which css is most specific to the element being displayed. The closer a style is to an element, the more precedence it has.
Each of the html elements within your a element have classes applied to them "card h-150","card-body","info-card","sub-info-card". That's a lot of classes to sort through.
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
How those classes interact will take precedence over your a definition because they are more specific, in other words, closer to the element.
Trying to correct the problem by redefining the a element with an override like text-decoration: none!important will certainly work, but it is not good practice (see first answer here). You should look closely at what the invoked classes in your html elements do. If those classes aren't what you need, use a different class, or this could be a good opportunity for you to write your own custom class in the style.css. However, writing your own class if you're just beginning to get familiar with css may prove challenging. Probably better to find the class you really want from within bootstrap. That's the value of bootstrap.
To answer your original question which is basically why doesn't your css apply to your html elements, it's because a class is applied on the element and that takes precedence. CSS is tricky with specificity and it's hard to learn at first. See some of the answers in this post, and also this link mentioned in that same post.
Try accessing the 'link' attribute of the anchor tag as below and setting the value as none, also add !important to it, this worked for me.
a:link {
text-decoration: none!important;
}

Does using pseudo elements like :first-child or :last-child

I firstly say that i don't know anything about how css rules are assigned to DOM elements by browser, so that my question is more around it, but i got wondering this in this particular situation I got into, so I use it for formalizing my curiosity:
I do have an HTML snippet like this:
<section>
<div>I'd like to be blue</div>
<div style="color:green">I am quite <p style="font-weight: bold">self confident</p> about my styles</div>
<p>I'd like to be biig</p>
</section>
The text's content of the divs tries to describe my requirements: The first div MUST be blue, the second one i don't care because I will probably use inherited properties or I will set through js or whatever.
The p should be bold,
So I want to assign styles to do that, and I do something like this:
section div {
color: blue;
}
section p {
font-weight: bold;
}
And that obviously works as expected. But, CSS has nice features to target more specific elements. So I could do, for doing the same thing:
section > div:first-child {
color: blue;
}
section > p {
font-weight: bold;
}
This will affect only elements that are direct children of the section, and only the first div of the set, so that i will have the same result, but selecting elements more specifically.
I wonder if this helps browsers assigning css rules to elements.
I think that at some level the browser check for each DOM element the css' rules that target it, and if it finds matches (a css class is actually targeting it), it checks for conflicts and performs overriding if needed.
Would excluding elements from that sets, by targeting them more specifically help the browser to assign style (increase performance or decrease) ?
If it increases, is it meaningful or it is so little that everyone ignores it ?
If it decreases, how much and why ?
Thanks for any advice.
According to this article from Mozilla Development Network, the more specific your selectors are, the better. So if you do not bother how many divs get colored blue, the general selector section div is better. The longer your selector chain is, the harder it is for the browser to find that element since it needs to match more things. The most performant option in this case would actually assigning a class named for example .blue to the div you want blue.
The element>element (direct child) selector is more performant than the element element (descendand) selector in the sandbox but will probably force you to write a longer selector chain if you wish to overwrite it at another point.
To answer your question, in your example (at least in a nutshell), the overall performance will probably decrease by a little (meaningless) bit since pseudo-elements like :first-child are the least performant selectors and you furtherly have a longer selector chain.
If you actually asked me which of those to use in a project with more than just six lines of css, I'd encourage you to use the first example aswell since it's much more easy to overwrite and reuse.

CSS: Set color of `strong` inside specific paragraph class

I am a bit of a newb in CSS styling.
I have a stylesheet in which image captions <p class="caption"> are light-on-darkl while normal text is dark-on-white. This works fine in general, but somewhere else in the stylesheet is set strong {color: #XXX}, which seems to override the color I set in the .caption tag in my CSS.
What I would want to do was something like:
p.caption strong {color:#YYY}
...to give <strong> its own color inside the captions, but this is clearly not the correct syntax. How do I do this?
The html is autogenerated and I am not too familiar with the code that does it, so preferrably CSS-only solution.
The syntax p.caption strong {color:#YYY} is correct, naturally assuming that #YYY is replaced by a real color value. If it does not work, then there is some other style sheet that overrides it using a more specific selector and/or the !important specifier. You need to check what the other style sheet does and modify your rule so that it “win”.
Developer tools (which you typically open by pressing the F12 key) let you see which style sheet rules apply to an element.
If another style sheet sets just strong {color:#XXX}, it won’t win your rule. It may have strong {color:#YYY !important}, in which case you too need to use !important and a more specific selector. Using just p.caption strong {color:#YYY} !important may help, but it does not if the other style sheet has a similar rule, in which case you need make your selector more specific. This might result in a somewhat artificial selector like html body p.caption strong {color:#YYY}.
If you can't change the original CSS, try overriding this value:
p.caption strong {color:#YYY !important}

Alternative to span

basically I have some nasty markup:
<td colspan="2">
<strong class="ajax_cart_quantity">8</strong>
items
<strong class="ajax_cart_total">
271,60 $
<span class="price-2"> (210,66 €)</span>
</strong>
</td>
I formatted the code so it is easier to read. Here:s my problem: I need to give .price-2 some styling (smaller font).
What I can't do: use class or attributes, because total value is updated and refreshed via ajax, and giving class attribute to span.price-2 breaks down json.
What I can do: wrap second price in some distinctive elements without classes and attributes.
There are already some seletors in core css which target second price table span. So basically I need to come up with some other inline element line span, so I can create my own styling selector for price 2.
I need something compatible with the older browsers too.
Thank You
Personally, I'd use <em> or <small>. They're both valid and fully supported, furthermore they impart some style of their own which could be useful.
But you don't event need a replacement - just use span without the class and target it differently in the CSS:
.ajax_cart_total span {font-size:0.8em;}
Leave the html as it is add to CSS a specific selector:
table td strong span.price-2 {
font-size: 0.8em !important;
}
Add the !important only if the selector (table td strong span.price-2) is not specific enough.
This works even in ancient browsers.
If you just need another inline element that (still) works, you could make use of <b> or <i> - those work inline are still supported :)
(<b> was used for bold and <i> for italics, but in HTML these text effects are currenty accomplished with <strong> and <em>). <b> and <i> still exist albeit used much less frequently to achieve the aforementioned text emphasis. They will be interpreted inline.)

override definition in css file

I have a css file that defines style for all <p> tags.
like this
p { ......... }
How can I write a <p> in a page where the stylesheet is included that has default styling?
There's no easy way to do this.
There a some common tricks to simulate that behavior though. The best one to use would vary based on how complex the overridden region is, and how often you want to do this.
Method 1 (for simple overrides):
Add an extra class definition in the statement similar to the one where you clear the default styling (such as is discussed at http://www.wordpress.darfuria.com/blog/clear-css-defaults). You might have to arrange the declarations carefully to prevent the 'normal' style from taking precedence.
.override {/*Your default style overrides, color: white;
margin: 0; background:none; etc */}
<p class="override">foo</p>
Method 2 (clunky, but good for complex regions):
Use an iframe to pull the whole region from a separate .html file hosted elsewhere on your site. The content inside iframes respects the CSS of the page inside the frame, and generally ignores the CSS from the surrounding page.
Method 3 (good for one-shot overrides):
Use inline styles, as others have described here.
Edit:
Not Really a Method, But Probably The Most Correct Way
Also probably not what you want to hear
Re-think your how you've arranged your classes.
For example:
If the overridden <p> is special in some way, it probably deserves it's own class that describes what it's purpose is. <p class='override'> doesn't help people who will be looking at your design after you're done, since it doesn't tell them what the overridden text is for or why it's styled that way.
Are the overrides coming in a specific region? If so, them a style definition like div.left_nav p {/*styles*/} might be a better fit.
Lastly, Is your default <p> styling not really default? Maybe a more loosely specified p style might be in order, with additional p.foo and p.bar definitions later on.
This doesn't fix your immediate problem, but it might be worth chewing on before you start your next project.
You can use inline styling to override the default styling.
<p style="background-color: #ffffff">white bg</p>
Inline styles have the highest precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves.
Just to check. For all the talk of "default styles", if you set the style for a type of element in a CSS file, e.g.:-
li {...}
Then you also include a css file that contains a class definition and apply that class to an individual instance of that element type, e.g.:-
<li class="myLiClass">Some Text</li>
From what I understand it is impossible to get the class myLiClass to override any attribute of the style specification "li {...}" for the element by providing that overriding style in a css class.
Therefore I assert that this means:-
"If you specify a style attribute for any html element type (element type, not a class) in a css file, then all pages that use that css file cannot show that element type attribute using any different styling, where that different styling is stated as a css class."
Can anyone confirm this with an absolute yes, or a working example of why this assertion is not true.
You can apply the style for your tag from your stylesheet like this:
CSS
p.first{ color: blue; }
p.second{ color: red; }
HTML
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
</body>
</html>
I would agree that there isn't really a "Default" style for a tag since each browser has significant freedom on how to display it.
I think the easiest answer is to rethink the problem - define a class that you use for all P tags and then if you fail to use the class it will give you the default styling.
<style>
p.all {margin.top:9px;}
</style>
<p>This would be default style</p>
<p class="all">This would have your style</p>
Alternately, if you wrapped all of your stylized content in a div or some other tag, you could nest the styles like this:
<style>
div.foo p{border:1px solid black;}
</style>
<p>normal</p>
<div class="foo">
<p>abnormal</p>
</div>
Hope this helps.
What makes this impossible is that there is no "default style".
Default styles come from the browser's internal style sheet and the user's preferences. So different browsers and different users have different defaults.
You could assume that white/transparent background, black foreground and Arial font were going to be most people's default styles, but you couldn't be sure.
So, like other people are saying, you have a fundamental problem because you've got a style for all P elements, and there's no way to code a P which doesn't inherit from that style, you can only over-ride it using CSS of greater specificity.