Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Two different paragraph can be given two different type of colours using the below css code.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
Now, In the html code i can Specify
<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>
The above CSS code can be modified to as Shown below, So which one should be used, considering best coding Technique(Design).
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
Classes can be duplicated which means a p tag and a div tag can have same class.
But if you want to style only the p tag then you should follow the second style. If you are not using your class anywhere else except for the p tag you can use the first style.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
will not be limited to p tags....it can be allocated to any tag having the class paraStyle1 or paraStyle2, it can be a,p or even a div... see demo here
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
is specifically for the p tags having classes paraStyle1 or paraStyle2....no other html tag can avail the style of these classes except p tags.... see demo here !!
The second syntax (p.paraStyle1) applies the contained css only to p tags with the paraStyle1 class. You should use this syntax if you are planning on reusing that class name with different styling for different tags.
When you specify your CSS selector to be p.<class>, it means that you only want the p tags with that class to be styled. However, if you need this same style to be applied to other tags as well (eg a <div> tag), then use the first method.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have a <div> element inside a <li> element (as shown in code snippet). The <li> element has cursor: pointer style property set and I can't remove the cursor pointer in that nested <div> element.
The <li> is not in our control to remove css, since it comes from a third party.
.container {
cursor: pointer
}
.local {
cursor: default !important
}
<ul>
<li class="container">
<div class="local"> Hello World </div>
</li>
</ul>
The .container class is actually irrelevant here. It just so happens that it has a cursor: pointer property which shows on, but the problem is in fact - What is overriding the .local classed <div> element from rendering the cursor: default property.
The best way to answer that would be to take a look at the elements and styles panels on your browsers developer tools and see what's doing that. It will let you know what's overriding it.
Then you can use adjustments, either by increasing specificity, or by changing the code that's overriding it. But the specificity needs to be relevant in comparison with the .local class and whatever is actually overriding it.
Edit: In the provided example, you don't need to worry about specificity because they're different classes. However, I frequently see !important being added to rules as a lazy way to override specificity issues that aren't replicated in the example. I assume that to be the case here as well since the OP notes that, "the container comes from a third party". So understanding specificity rules will help resolve the issue.
You could use !important but that should really be a last resort. However, you're much better served long term by increasing CSS Specificity.
Currently .container & .local have equal weight. You can increase specificity by: Using an ID, referencing more hierarchy, using combinators etc. Then the NEW attributes will override the previous attributes based on CSS order.
Eg:
.element {
background: blue;
}
.element {
background: red;
}
// produces a red element
So in this case you want to increase specificity. You can do that easily like this:
.container {
cursor: pointer;
}
.container > .local {
cursor: default;
}
// where local is a DIRECT child of .container
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In an online tutorial, I was recently told to create a class for nav elements called "nav". I'm a beginner in CSS, but is it just me, or is this redundant/confusing/bad practice?
NO it's not redundant.
YES it's redundant if you think in your specific case you're fine with nav{ /*blaah blaah*/ }
<nav> is a Semantic HTML5 tag that represents toward SEO a navigation. A navitagion is all you want it to be. So in the case you have multiple nav elements in our page and you're OK to target-styles directly the tag element using nav I'll be glad to see that.
It's not redundant. The DOM element nav is different from the CSS class nav.
If you wanted to style this element by class, you would use this style declaration (for example):
.nav { background-color : #F00; }
if it were styled by element type it would be:
nav { background-color : #F00; }
This may seem trivial, but that period . makes a difference. It means you are identifying the item by class and not by element name. If you use the class syntax (with the .) then you could also write:
<div class="nav"></div>
This would show with a red background if you included the class definition, but not if you styled the element type directly.
In simple applications you may be able to get away with directly styling element types (e.g. <nav>) as opposed to classes (e.g. class="nav"), but as you get more complex layouts you are going to want to use classes. Additionally, if you use a selector-based library like jQuery, or document.querySelect() you may have good reasons for specifying a class.
If you truely can know that all <nav> elements can be styled the same in all your pages, then by all means just use the element selector, but to leave yourself flexibility it's best to use classes.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I always have added my wildcard rules *{ } before my html{ } rule but I've seen some people putting html before wildcards, so I was curious what was best practice.
*{} is the lowest level element selector so you should put it in top of your stylesheet so that other elsement css rules could be overridden without using !important easily.
For eg:
*{
color: blue;
}
div{
color: red;/*overridden color*/
}
Since both *{} and html{} element selector is lowest level selector you may put them in any order in top of your stylesheet. But I would prefer to use *{} as first rule as it denotes to all element selector.
Having the html rule after the wildcard is the right way, because the rules are read top-down. The other way would override your html rule.
*{ font-family: Sergio Ui;}
html{ font-family: Tahoma;}
With this html gets Tahoma font.
html{ font-family: Tahoma;}
*{font-family: Sergio Ui;}
With this html gets Sergio Ui font.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.