Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Don't have much experience with css, but how do I override the settings for that highlighted via div class p span? I need to override the color to #ffffff
[Update] thank you for your answers, you all have helped to solve this, have been stuck whole day on this and could not solve it or find the specific tutorial or sample.
Sorry if my question is not very well-formed and very specific without providing much context. And sorry again, if I was not able to find the right answer on google, as CSS looks a bit like voodoo coming from Swift world. I know what I wanted to achieve but I could not find the right way to do it. Thank you all for teaching me something new and useful today.
If you use the selector .woocommerce-product-details__short-description, you'll select the div element that contains the p element that contains the span you want to style. So to select the span, you could do: .woocommerce-product-details__short-description > p > span. This risks selecting more elements than you really want to select - it will select all spans that are children of ps that are children of elements with the class.
If you wanted to just select this specific element, you'd have to be more specific. Without seeing the rest of the code, it's hard to say exactly what makes this element unique. One consideration is the unique id of the parent product element: product-45590. So to make your selector very specific, you might do #product-45590 .woocommerce-product-details__short-description > p > span. Note the space vs the > symbol. The > signifies a direct descendant, like a child to a parent, while the space signifies any descendant, like a grandchild to a grandparent or a child to a parent.
For the actual color-changing once the selector is right, you can just do color: #ffffff. However, because of CSS selector specificity, you cannot just override the color on an element that has the color defined with an inline style. So you also have to add !important to the rule. Note that this is typically not preferred practice because it means that future developers will have a very hard time overriding your style, but sometimes it's necessary.
Putting it all together:
.woocommerce-product-details__short-description > p > span {
color: #ffffff !important;
}
use below code with important
.woocommerce-product-details__short-description > p > span{
color: #fff!important;
}
I think you could just edit the color: #3333 to color: #fff
Inline styling in html takes priority, so you will have to change that to your desired colour or use !important after the colour in css.
Related
I am looking after a portal on a low-code platform. I am trying to update the background-color for a box on our portal, however am really struggling to update this.
I have copied the selector and also included a screenshot from the console.
If someone could point me in the right direction I would really appreciate that.
div.ideas-list--cntr.ng-scope > div > div.panel.panel-default.ideas-list--panel > div > div.panel-body.ideas-list--content > ul > li:nth-child(1) > div > div.idea-details--cntr > div.ideas-categories--cntr > a
Thanks
Mike
I have tried updating the background color as follows and was expecting a white background for the box:
.ideas-list--panel .ideas-categories--cntr a {
background-color: white;
}
However, I am still seeing #33466C background color.
In order to override the backgorund color the new rule should have bigger specificity than the rule you're overriding, you can achieve this either by:
adding your overriding rule after the original CSS in HTML,
increasing the specificity of the selector with techniques like repeating a class, for example .ideas-list--panel.ideas-list--panel .ideas-categories--cntr a,
or ending the declaration with !important
These techniques are ordered starting from the ideal practice, so pick the one that is easiest for you.
It seems there is another part of the selector which you erased with red color in your screenshot – this makes it more specific than your selector, so your rule won't apply due to a lower css specifity.
Use the complete selector from your screenshot, then it should work.
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 2 years ago.
Improve this question
I frequently need to address generic elements inside some specific sections of a page. I find this approach most easy to understand in terms of what any rule is affecting:
.shop > .products > .product > .description > .warning {
color: red;
}
But I often see this:
.shopProductsProductDesc > .warning {
color: red;
}
Does it really matter which approach is taken?
It really depends on the problem you are trying to solve.
The selector .shop > .products > .product > .description > .warning to my understanding would be used for two cases:
You have multiple warning elements but you only want to select the elements inside your description and there are other selectors used for warning that you don't want to overwrite.
You need to overwrite a previous selector that is less specific. Ex. .shop > .products > .product > .description .warning
The other selector .shopProductsProductDesc > .warning is less specific than the first one but assuming the container of .warning has those two classes .description.shopProductsProductDesc then the outcome would be the same as the first one.
CSS is all about specificity, if your selector is more specific than the last one used the properties would change. This is why you have to be careful if you are using specific selectors because your last option to alter the properties would be to use !important.
I hope this helps to clear things out.
After trying a few different styles, I think that personal preference (or a set standard if you have collaborators) is really the way to go. I prefer the second version, but the first one is also quite legible.
If you consider efficiency of what the browser has to do under the hood to render CSS styles, BEM-style for example, is usually the ultimate winner as it is the most lightweight for the browser. I use BEM for some layout/common elements.
In real life unless you are doing something seriously wrong, modern browsers and devices make this difference of CSS parsing and rendering somewhat negligible. But that is if you code everything well.
I've worked with spaghetti CSS codebases that could take minutes to render all SCSS (it was a huge codebase, but a few files were big bottlenecks).
It matters because of specificity. The first style rule will always override the second, regardless of where they both appear in the stylesheet, because it is more specific (basically it has more class selectors in it).
That said, the first rule is a nightmare from a maintainability perspective, for a number of reasons:
It makes code incredibly hard to read and understand
It's harder to override (as we have seen).
If you change the structure of the HTML, it will break
You can only reuse it if you mirror the structure of the HTML exactly.
It's also bad from a performance perspective. When browsers are matching an element to a style rule they read each selector right-to-left and keep going till they either find a match or can exclude the rule. Therefore, the more simple the selector is, the faster a match can be determined. If a selector consists of just a single class name, the browser can match the element with the style rule more quickly than if it has to search upwards in the DOM tree.
The second rule is better, but optimal would be something like the following:
.shopProductsProductDesc--warning {
color: red;
}
This solves all the problems above, and it's long enough that there's unlikely to be name clashes elsewhere, (though obviously not impossible).
In general, nesting selectors in CSS is bad practise, in my opinion, and the best CSS methodologies are those that have ways of avoiding this, e.g. BEM, CSS-in-JS.
According to my own experience, the second option is often best, not for direct technical reasons (in fine, it will perform the same), but rather for UX consistency and code maintenance.
The first option produce an "heavy" selector, which will be harder to override. It can be wanted, but it is often the sign of an overall messy CSS, because if everything is overconstraint, it is less easily reusable/extensible.
From my understanding of CSS and frontend reusable components, you would always only need two levels.
The style of your warning component (no size, no margin, size depends on where you will display it, and margin is position, only internal design here):
.warning {
//Your design here
font-size: 1.5rem;
font-weight: bold;
color: orange;
}
And the positionining and variants inside containers:
.container > .warning {
//This is an example.
position: absolute;
right: 0;
border: solid 1px red;
}
Having long CSS selectors will make things more complex, hard to follow for your teammates, and hard to override because you will probably need a longer CSS selector, and it never ends. Plus, you will get an heavier bundle at the end.
If you want an efficient UX, the UI shouldn't be that different everywhere, so you should not need to have that many variants of the same component. Otherwise, maybe you need multiple different components, but you certainly want a simple and efficient UX, and that often goes with not so much visual concepts, so you must avoid tons of variants.
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 understand the title is a bit misleading, but I come from an Object-Oriented background, and I've recently began a shift towards web development. I've only got a basic grasp of HTML, and been learning and messing around with CSS, but there are some parts of it that are a bit confusing, and I'm trying to get it into terms I can understand.
My CSS:
.Person .span4 p
{
margin-left: 10px;
margin-right:10px;
margin-top:10px;
}
From what I can understand, this means that any p tag that is inside a container, like with the class of "span4", which is in turn inside another container that has class="Person" will be formatted with the specifications listed above.
In other words person.span4.p.format(String[] formatArgs), where the formatArgs are the margin-left, right, and top.
The Question: Is this an appropriate way to look at it?
I know it might be comparing apples to oranges, but I'd like to get an opinion before I go running with some conclusion that could be very wrong, and an actual explanation on how these work.
Your question about .Person .span4 p is correct, that will style a p element that's a descendant of an element with a span4 class that's a descendant of an element with a Person class.
However I wouldn't try to interpret classes in HTML as similar in any way to OO classes. They're completely different concepts, and I think that'll just end up confusing things.
Classes can be assigned to HTML elements using the class attribute (class="span4"), and these can then be used in CSS or JavaScript to apply additional styling or behaviours to those elements. Think of giving an element a class as tagging it with a particular keyword, so it can be easily targeted later. Elements can also be assigned multiple classes by separating them with a space, eg. class="span4 box".
In addition, .Person .span4 p isn't actually a "class", it's a selector. The .span4 syntax is called a class selector, the p is an element selector, and using a space between two selectors creates a descendant selector. Additionally #myId is an ID selector, and there are plenty of other types of selector as well.
I'd recommend this guide as a good way to get up to speed on the correct terminology.
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 8 years ago.
Improve this question
My website is a simple one using images. The whole site content is based on the menu's div tags. I added link using tag and created separate hover effects for it using different , now what happens is when i hover that link the same hover effect that appears for menu occurs and the hover i created for the link doesn't work. I can close menu's div only at the last[as the alignment is getting changed if i close the menu's div before the link and use a different div for the link]. Please suggest a solution, if u want me to post the code to make it clear please tell it. Thank you.!
its best to make sure that your making sure the pseudo-class is specific to a certain node. This can be achieved by going :
#(div name) a:hover {
color: blue;
text-decoration: underline;
}
it'll ensure that the a attribute nested inside of the specific div is being referenced.
You can use attribute selector, to select particular link, or type of link, based on what's in markup: Here's example:
a[href="www.yoursite.com"]:hover { color: red; }
You can take any attribute that's inside your html tag, to select (id, class, href, title, alt etc. even made up attributes).
You can take it step further, by using ,,similar'' operator, which selects element based on, if specified phrase exists in the attribute (but it's not exactly same). For example:
a[href~="https"]:hover { color: red; }
Will select all links with https inside href atribute.
Remember, that attirbute selector isn't suported in ie6, and is problematic in ie7, keep that in mind, you can look for workaround easly tho.
While there exist selectors to select items preceded (#hlinks+#hsearch) or owned (#topbar>#hlinks) by other items, there's no way to do the opposite.
For example there isn't something like
li:has(ul){ }
To detect list items that have other lists within them. Wouldn't that be convenient?
AFAIK, the feature is not even in the plans for CSS, so my question is: why is this so?
This is generally called a "parent selector"; as you say, they don't exist in CSS, though they could be useful.
There's an interesting discussion here; the summary is that they would have a large negative effect on performance and would allow people to make mistakes with large consequences. People who understand these things seem to think that these issues can be overcome, but there hasn't yet been sufficient demand for someone to actually do it.
You're referring to the concept of a "parent" selector - selecting the parent element under a particular condition. You're correct about this feature not being present in CSS (not event CSS3) - to my knowledge, it not possible at the moment to the way the DOM is parsed by CSS. However, this feature is available using jQuery and the :parent selector or the :has selector, which it seems you may be familiar with already.
EDIT: For a tremendous amount of detail on the idea of a parent selector, see http://shauninman.com/archive/2008/05/05/css_qualified_selectors.
This is standard in CSS since...uh.... the beginning of CSS.
It's just a space:
li ul means any ul that is inside li
If you want to do that just do:
ul li ul li {
}
So now you are searching for any list-item that has an unordered-list inside of it with a list item.