I'm currently messing around with Bootstrap and LESS, and tried to do the following:
LESS:
.class1 {
.jumbotron;
div {
.container();
color: white;
}
}
HTML (just the part that matters of course):
<div class="class1">
<div>
<h1>Heading</h1>
<p>Some text</p>
</div>
</div>
But the .container() mixin refuses to work when in a nest. Note that the text color is indeed white, which indicates the problem is only with Bootstrap mixins.
Indeed, if I do this:
.class1 div {
.container();
color: white;
}
It works like a charm.
But I'm sure LESS isn't supposed to work like that, so any help is much appreciated. Thanks in advance.
.class1 div {
.container();
color: white;
}
is working, so the problem comes from your selector or something between the two selectors. Look at .jumbotron; and edit it, so you will resolve the conflict.
Related
I'm pretty new to CSS/HTML and I need a little help with styling. So I have a CSS style sheet where I did something like this
p{
color:black;
}
Then in my HTML, inside of my footer tag, I have a paragraph.
The problem I am having is that I want the color of the paragraph inside of my footer to be blue.
I tried doing something like this:
footer{
color: blue !important;
}
but it didn't work so I was wondering how I can get just the paragraph in my footer to be blue because I want the rest of my paragraphs to be black.
If the !important method is the wrong approach I was wondering why? From my research, I thought it was supposed to override any previous styling.
Answer:
Why is !important not working on my stylesheet?
It is working perfectly as it is designed.
How I can get just the paragraph in my footer to be blue
For this, please use the appropriate selector.
footer p{
color: blue;
}
That is a bad practice
Try doing something like this
For your Footer
HTML
<div class="footer">
<p>This is a paragraph.</p>
</div>
CSS
.footer p {
color: blue ;
}
Don't use important tags.
I am using a css file I got online for a website I'm making, but I'm only embedding some components into the website. This css file uses global styles, and they are overriding all of the global styles on my website. I figured I would just wrap the global styles and make them descendants of a class, and then make that the parent class of my component. Here's an example of what I'm saying
h1 {
color: red;
}
.text {
color: blue;
}
But now all of my h1 tags on the page end up red. I decided to wrap all the global styles and make it so only the descendants of a certain class would be affected by that style. Here's what the new css looks like
.parent-class h1 {
color: red;
}
.text {
color: blue;
}
and make my html look something like this
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
The first part actually works. My top h1 is not affected by the global css, when it was before.
But here's the problem I'm running into. Before, the text class was overriding the global h1 style, and my Hello ended up blue, while my How's it going was red. Now that h1 has been wrapped by a parent, Hello is also ending up red.
I know that the parent style appears first in the css file, so I don't think it's a question of what is being rendered first. Also, I know that everything is using classes, and not IDs, so that priority issue isn't occurring either.
I'm guessing that this is occurring because of the .parent-class h1 now has two rules while .text only has one. If that's the case, is there a way to mitigate this problem?
One thing I could do is just wrap the parent around the child, like .parent-class .text, but the css file I found online has close to 25,000 lines of code, while the global rules only had about 300, so that would be extremely time consuming, because there's thousands of classes I would need to alter.
Is there another way to fix this problem? If not, is there a way to wrap a parent rule around multiple blocks of code, in a way like this
.parent-class {
.text {
color:blue;
};
h1 {
color: red;
};
}
Or is that not possible?
Make sure your second selector is having the same (o higher) specifity by combining it with something else. You can for example add nth-child(n) which will not change the behavior of your selector but simply increase its specificity:
.parent-class h1 {
color: red;
}
.text:nth-child(n) {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
You can also duplicate the class:
.parent-class h1 {
color: red;
}
.text.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
If you need to update multiple stylesheet rules loaded from another source, you can use the CSSStyleSheet API to delete and insert rules:
const styleSheet = document.styleSheets[0]
const rules = Array.from(styleSheet.cssRules).map(r => r.cssText) // get the rules texts
rules.forEach(() => styleSheet.deleteRule(0)); // remove the rules from the stylesheet
rules.forEach(cssText => styleSheet.insertRule(`.parent-class ${cssText}`)) // generate new rules with the namespace
h1 {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
If you just need to exclude a single case, you can use the :not() pseudo-class to disable for the h1 elements with the class .text:
.parent-class h1:not(.text) {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
just use !important like this
h1 {color: red;}
.text {color: blue !important;}
Im using bootstrap 4 if that matters, but I am trying to change the color of the texts within the anchor tags. I am using an external CSS file and can't seem to get it to work. This is probably a dumb question, but hey i'm new to front-end! Teach me wizards!
#home_nav {
background-color: #5680E9;
}
.home_text{
color:#ffffff;
}
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col-4">
<div class="display-2 home_text">Create</div>
<div class="display-2 home_text">Explore</div>
<div class="display-2 home_text">Your Library</div>
</div>
<div class="col-8">
</div>
</div>
</div>
Welcome to StackOverflow and also welcome to coding frontend!
I'll try to give some explanation.
.home_text {
color: #ffffff;
}
tells the browser to apply a white text color to elements that have the CSS class home-text.
color is also a so-called inherited property which means that child elements will also have color: #ffffff; (short: color: #fff;) unless more specific rules state otherwise.
In your case, the browser has default styles for many elements, including <a>. This is called user agent stylsheet and its rules apply unless overwritten by your css.
To overwrite a rule, your rule needs to be at least as specific as the user agent stylesheet rule.
The user agent stylesheet for anchors in e.g. Chrome looks like this:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
This is using webkit (the engine behind chrome used to be called "webkit", thus the naming) specific syntax which you shouldn't let throw you off. The important part is that it holds a rule for color which you want to replace with your color #fff.
On top of that, browsers also have a different default color for links which have already been visited. You either need to define this for your links too (e.g. #eee for pages already visited) or simply add a second selector (separated from the first by a comma) telling the browser not only to apply your color to a elements, but also a elements in visited state. This is done by adding :visited to a.
To sum it up, if you want all links on your page to be white, you'd go with this:
a, a:visited {
color: #fff;
}
If you want only a inside of elements that have class="home_text" to be white:
.home_text a, .home_text a:visited {
color: #fff;
}
If you have any further questions, or if something is unclear, just ask in the comments!
Happy trip into frontend!
you have to add the style to 'a' specifically
.home_text a{
color:#ffffff;
}
You can try this:
.home_text a {
color: blue;
}
If you don't want the underline then try this:
.home_text a {
color: blue;
text-decoration: none;
}
Use complete selector for css .. Ex. .home_text >a
If still not working ..color must beihg set somewhere else. So check other css or write ! important for color.
Little advice
Use the full path to an ID
#home_nav .home_text a
or
home .home_text a
Sometimes you save your nerves when the element does not want to change.
I am trying to write CSS that only applies to certain Divs. I have code that works for this example, but I would like to do it in a way that doesn't require me to put .landing in front of every line
HTML
<div class="landing">
<h1>Hey</h1>
<p>Hi</p>
</div>
<div class="notlanding">
<h1>Hey</h1>
<p>Hi</p>
</div>
CSS
.landing h1{
color: red;
}
.landing p {
color: blue;
}
This produces what I want to accomplish, but is there a way to wrap both h1 and p in .landing?
Something like this
.landing {
h1{
color: red;
}
p {
color: blue;
}
}
No this way you can not use in CSS.
But you can use SASS - Syntactically Awesome StyleSheet
http://sass-lang.com/
SASS allows you to write dynamic css like variable declaration and much more. Just check above link.
You could do that if we'd be using a css compiler like less or sass... I think you can't do it in pure css.
Another way to achieve this is using Shadow DOM (not widely supported yet). Then, your landing div cound be a shadow root and could have its own stylesheet... this basically works in Angular 2 today.
I'm supposed to be removing images of graffiti off of a wall. The exercise is supposed to help teach me how to use selectors in different ways. The tricky bit is that I am competing with a second style sheet and I am trying to make a new style sheet to remove the images of graffiti.
This is the relevant code I am working with:
<div id="wall">
<div class="parent">
<div></div>
<div>
<div id="tag-6"></div>
</div>
</div>
So what I need to do is select
<div id="tag-6"></div>
I understand that I am selecting a great grandchild of <div id="wall"> I even understand that it is not the first child but everything I have tried so far does not work.
This is what my CSS looks like:
#wall .parent > div > div {
display: none;
}
I also looked up the solution to this problem and it looked like this:
body div#wall div.parent div:last-child div#tag-6 {
display: none;
}
Yet when I copied and pasted this CSS code into my stylesheet, it did not work. Can anyone help me out?
if it has an ID, you don't need any combined selectors, just use #tag-6 as a selector
#tag-6 { display: none; }
Addition after edit of question:
Just make sure your own stylesheet is referenced after the stylesheet whose styles you want to overrule.
Try:
#wall .parent > div #tag-6 {
display: none;
}
The most obvious method is the direct route:
#tag-6 {
display: none;
}
You have a typo
<div id="wall>
should be
<div id="wall">