I'm referencing to some bootstrap style sheet and there's a definition for
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
I want to use this style but due to my HTML class="alert-success badge", it's overridden by the other definition
.panel-default>.panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
Now that the latter definition is more specific, it prioritize over my desired CSS. How can I resolve this?
EDIT:
There are a lot more other classes that have this issue. Is there a solution I don't need to specify them one by one?
With CSS Specificity, you should just override the more specific selector with your own.
.panel-default > .panel-heading .badge.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
Edit: Other options can include:
Removing/Altering the offending CSS file (difficult with bootstrap, but doable, and maintenance headache if you decide to update bootstrap.css)
Update/remove offending selectors
Adding :not() selector to avoid certain scenarios
Altering your HTML Structure so that it does NOT follow the offending CSS selectors.
Changing class names and/or using new ones
Inserting/Deleting additional nested divs/elements (to avoid > direct-child selector)
Thankfully, if you have lots of classes to update, a smart regex replace is your best friend, but that's another topic.
Seems like there's no easy and elegant solution, so I just did my simple workaround. I copied out the badge css and gave it a new name to use instead of using the bootstrap badge class. Sad.
.panel-default > .panel-heading .alert-badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
}
ID selector has higher specificity priority than CLASS. If you can able to add id, it will over-ride .panel-default>.panel-heading .badge
.panel-default>.panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
#custom.badge{
background-color: #f00;
}
<div class="panel panel-default">
<div class="panel-heading">
<div class="badge">class target</div>
<div id="custom" class="anything badge">id target</div>
</div>
</div>
Here's the mozilla documentaion for specificity,
https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Thanks!
You know what I'm not sure if your solution is even registering as css. I had to do this to even get a result to show. I think the CSS was just off syntax wise.
.panel-default > .panel-heading, .panel-default > .badge{
color: #f5f5f5;
background-color: #333;
}
I only noticed this because I actually tested out my code this time.
Related
I've got div that uses several styles
<div class="alert alert-secondary login-alert" role="alert">Please contract administrator to recieve credentials!</div>
Where alert and alert-secondary are default bootstrap 4 styles while login-alert is just a simple one-liner
.login-alert {
font-family: 'Kavivanar', cursive;
}
How to combine it into one style? The thing is that I want to use that combined style only in certain places and I might need pure alert or alert-secondary somewhere.
In bootstrap 4, the css for .alert is
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
and for .alert-secondary
.alert-secondary {
color: #464a4e;
background-color: #e7e8ea;
border-color: #dddfe2;
}
So to combine them, use:
.login-alert-combined{
font-family: 'Kavivanar', cursive;
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #464a4e;
background-color: #e7e8ea;
border-color: #dddfe2;
}
But I don't see what is wrong with setting class as "alert alert-secondary login-alert" when you want to use all 3 styles.
try concatenating both classes in your css
.alert.alert-secondary{
font-family: 'Kavivanar', cursive;
}
Note that this will give the property to all your div's that has both alert and alert-secondary classes.
Check this question that explains it better.
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
This is more of a debate than a question but I feel that there isn't a lot on the internet that covers this topic.
For example foundation comes with hundreds of !important tags for things that in my eyes do not need them:
.text-center { text-align: center !important; }
There is loads of css that is simular to this which in my point of view is bad practise and the question I'd like to answer is why do css frameworks use them at all? Bootstrap and Foundation are two main css frameworks that both use them.
I've always been told that using important tags in css is very bad practise and should only be used for IE.
If you write your own CSS you have the freedom to add more specific rules whenever needed:
.center { text-align: center; }
.foobar { text-align: left; }
.foobar.center { text-align: center; }
However, the CSS framework cannot predict how you will arrange your HTML. So it is easier to do !important instead of generating thousands of combinations of more specific rules. Example:
.center { text-align: center; }
.foobar { text-align: left; }
.barbaz { text-align: right; }
/*
* assuming .center must be centered regardless of other rules and
* !important must be avoided at the same time, we need to do this
*/
.foobar.center { text-align: center; }
.barbaz.center { text-align: center; }
.foobar.barbaz.center { text-align: center; }
Is because you can have in your code st. like this:
<style>
#aside p {text-align: right;}
.text-center {text-align: center} /* without important text will be aligned to right */
</style>
<div id="aside">
<p>right-aligned text</p>
<p class="text-center">centered text</p>
</div>
http://jsfiddle.net/v1v4jaas/
In this case without inportant the text will be aligned to right. With important, the second paragraph will be centered.
Class has only a low priority against id, etc.
Using !important in your CSS usually means, the classes you have written do
not have a proper hierarchy.
The !important rule overrides a particular property. But should be used only when one is helpless and it has to be overridden.
Best practice would be to use !important only in utility classes alone.
eg. Say you have a button which u want to look similar throughout your application
.btn {
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 11px;
border-radius: 4px;
}
The above definition for .btn holds true unless it is not wrapped by any other class which could override the .btn formatting which we expect to be same throughout the application. But once it is wrapped by other class like below, the final style would be totally different from your expectations.
<p class="format-paragraph">
<button type="submit" name="save" class="btn"> Submit</button>
</p>
Now, to make your .btn class super strong and to be treated with respect by the ones wrapping it, change the .btn definition to:
.btn {
margin-bottom: 0 !important;
text-align: center !important;
vertical-align: middle !important;
touch-action: manipulation !important;
cursor: pointer !important;
border: 1px solid transparent !important;
padding: 6px 12px !important;
font-size: 11px !important;
border-radius: 4px !important;
}
This definition would be sufficient to make your button look similar throughout the application.
The .text-center { text-align: center !important; } class mentioned in question is nothing but a utility here.
Know more on !important precedence here.
so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO