This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
If I have a css file, mystyle.css:
body {
font-family: OpenSans, Arial, sans-serif;
font-size: 14px;
}
.news {
width: 800px;
background-color: #99EBFF;
}
but I wanted to override it for a specific part of the site for (in another CSS file, for example, cms-news-pages.css), e.g.:
.news {
padding: 2.5px;
width: 600px;
background-color: #FFE6B3 !important;
}
what would be a preferable alternative to !important for a class without getting into too much code spaghetti?
If anyone could advise me I'd be grateful for this, trying to make cleaner CSS coding.
Try to give more prefrence using parent selectors
Suppose .news has parent with classname .news-container
Then you can use
.news-container .news {
background-color: #FFE6B3;
}
This will override css property of the .news.
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I'm trying to make a button perfectly curved using only less/css and html, but I can't figure out how to make it perfectly curved instead of that ugly html (my opinion) curve.
How I'm Doing It:
HTML
<div class = "scrollToTop">
<button>up top</button>
</div>
LESS/CSS
#fullred: #FF0000;
.scrollToTop button {
.scrollToTop a button {
scroll-behavior: smooth;
background-color: #fullred;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 7%;
margin: 1%;
}
}
What am I doing wrong?
Use same width and height values and then adjust the border-radius as per your smoothess taste.. perfered border-radius should be between 8-12%
Its easier to define border-radius in pixels. As explained here Border-radius in percentage (%) and pixels (px) or em defining border-radius in % might give unexpected results.
This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 6 years ago.
I'm looking to use Flexbox to align an svg and the text within a button and all is working well in Chrome and Safari, but in Firefox there seems to be a problem.
This codepen should demonstrate the problem live.
Please note that I am pulling in https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss as an external CSS sheet in the codepen.
http://codepen.io/dominicchapman/pen/EgNgoq
SCSS as follows:
.Button {
border: 0 none;
height: 32px;
padding: 0 16px;
font-size: 14px;
background-color: orange;
color: white;
.Icon {
fill: white;
}
&:hover, &:active {
background: red;
}
}
.Button__icon {
#include inline-flex;
#include align-items(center);
.Icon {
margin-right: 11px;
height:16px;
width:6px
}
}
Any help would be greatly appreciated. Thanks in advance.
The problem is that Firefox does not fully support flexbox in <button> elements.
It's strange because the child boxes are blockified, and that's why you see the contents in different lines. However, the button does not seem to establish a flex formatting context. All flex properties are ignored.
I would understand not supporting flexbox on buttons, but IMO this strange mix is nonsense. However, mozilla people didn't see any problem.
Luckily they reconsidered and bug 984869 was reopened. But no work is actively been done on it.
This question already has answers here:
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
(8 answers)
Closed 8 years ago.
I have this html;
<div class="1"><br/>hi</div>
<div class="2"><br/>hi</div>
<div class="3"><br/>hi</div>
<div class="4"><br/>hi</div>
and then I added normal CSS formatting to the divs;
div{
height: 100px;
width: 100px;
border-radius: 100%;
margin: 20px;
display: inline-block;
text-align: center;
}
and then i wanted each div to be a different colour so I used the classes like this;
.1{
background-color: pink;
}
.2{
background-color: red;
}
.3{
background-color: orange;
}
.4{
background-color: yellow;
}
I am writing this in dreamweaver and when i click on the divs the little class thing tells me that they are coloured and the code is working, but when i preview in a browser the colours are not showing up and I just get the div part of the CSS.
it's probably very obvious but I can't think of why this is happening.
Thanks :)
Please avoid using classes with number at the beginning. It will fail for sure.
You can use for example cl1, cl2, cl3, etc.
I've got a problem with CSS inheritance. Here's a simplified version of my stylesheet, where I am trying to control font-sizes in nested divs for my web-app :
CSS:
.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small .btn {
font-size: 24px;
height: 28px;
}
.type-large .btn {
font-size: 48px;
height: 82px;
}
When you look at this sample HTML, the innermost type-small isn't used to format the "Save" button. It looks like CSS is picking up the classes irrespective of which is deeper nested in the HTML.
HTML
<div class="type-small">
<div class="type-large">
<button class="btn">Refresh</button>
<div class="type-small">
<p>Sample info </p>
<button class="btn btn-inverse">Save</button>
</div>
</div>
</div>
Take a look at this JSFiddle for an interactive version. Is there any arrangement of the CSS that would make this work (at scale)?
http://jsfiddle.net/HA5zy/
The inheritance ( specificity ) of
.type-large .btn { /* line 29 */
font-size: 48px;
height: 82px;
}
is greater than
.type-small .btn { /* line 25 */
font-size: 24px;
height: 28px;
}
When you mention "CSS is picking up the classes irrespective of which is deeper nested in the HTML." well, it's not the way it works.
To make it short, because your 2 declarations have the same weight, the one written AFTER in your css file will take precedence and be applied.
You can correct your situation by giving more specificity to your declarations like so:
.type-small .btn, .type-large .type-small .btn { /* enhence the weight */
font-size: 24px;
height: 28px;
}
Take note that the use if !important is discouraged and will lead you to another kind of problem sooner or later, like having the oposite html construction where you'll have a .type-large inside a .type-small.
One other thing, this point was raised by user Lucky Soni, you should consider constructing with minimum markups. Meaning, your whole html could be reformated to something like this :
<button class="type-large btn">Refresh</button><br/>
<p class="type-small">Sample info </p><br/>
<button class="type-small btn">Save</button>
jsFiddled here
See http://www.w3.org/TR/CSS2/cascade.html#specificity for more details and a better comprehension of cascading style.
6.4.1 Cascading order
To find the value for an element/property combination, user agents
must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
Why use additional markup just to apply these simple classes?
Modify your markup like:
<div class="type-small">
<button class="type-large btn"></button>
</div>
CSS:
.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small.btn {
font-size: 24px;
height: 28px;
}
.type-large.btn {
font-size: 48px;
height: 82px;
}
Fiddle: http://jsfiddle.net/z7nzv/1/
.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small>.btn {
font-size: 24px;
height: 28px;
}
.type-large>.btn {
font-size: 48px;
height: 82px;
}
Just specify that the .btn is an immediate child of the .type-x with the '>'.
Change your third class to this: (Notice the addition of "button")
.type-small button.btn {
Add the !important attribute like this:
.type-small .btn {
font-size: 24px!important;
height: 28px!important;
}
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Just after some beginner advice please on how to properly arrange some CSS.
I have a basic 3 page website. Each page will all display a footer at the bottom.
The footer will keep the main styles the same across each page (things like width, height etc) but I'd like to change other styles dependant on which page I'm on (background color, font color). I know this can be done, but I'm looking for some tips on the correct syntax to use so don't learn using bad habits, unless of course this is already correct?
What I have in the CSS is:
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
#footer_page1
{
background-color: red;
font-color: white;
}
#footer_page2
{
background-color: blue;
font-color: white;
}
#footer_page3
{
background-color: white;
font-color: black;
}
...and to call it in the HTML I have:
<div class="footer" ID="footer_page1">
Some text here
</div>
Is this OK, or should this be done a better way?
Many thanks.
you should use id #footer and class .page1, .page2, .page3 etc. - it is a better attempt because you still got the same footer (so ID should be the same) and you just want to change something (which can be done using different classes)
EDIT: and a quick tip from me: be carefull of setting width: 100% and border: 1px solid black because border isn't computed in item's width unless you set box-sizing: border-box property
what do I mean is that if you have a 1024px wide screen, your footer with css that you have presented will be 1026px wide with 2px cropped on the right side
When you refer to an id or class in css, you must use the full name of the class or id you are selecting. For example, when you want to refer to a div element that has id="someid" you must write #someid { in your stylesheet to reference this div by id.
Anyway, you're thinking about it right but your syntax is a bit off. Here is what you might be looking for:
/* common footer code goes here */
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
/* code specific for each page goes here */
#page1.footer
{
background-color: red;
font-color: white;
}
#page2.footer
{
background-color: blue;
font-color: white;
}
#page3.footer
{
background-color: white;
font-color: black;
}
Using two selectors in the same line is called selector chaining. In this case, you want to chain an id selector with a class selector.
Edit:
Here is a jsfiddle.
Looking at your code, the obvious "bad habit" one could find is that the ids page1, page2, and page3 are all in the footer div of those pages, which is a bit confusing, as "page" doesn't exactly uniquely define a footer.
Make sure you only use one id of the same name on any page, and if you do use an id, it should describe that element uniquely.
As the others have said, it should be noted that recently it has become good practice to avoid using ids (except for javascript functionality). Using only classes whenever possible is now the standard. It's good to know how to preform selector chaining and of course proper syntax is always important.
It's inadvisable to use IDs in CSS at all although it can be useful sometimes. In fact I would advise against using anything except classes and pseudo-classes and occasionally attribute selectors (although I personally use ID and element selectors all the time mostly out of laziness). The reason for this is so that you only have to work with one level in the cascade which simplifies things quite a lot in your stylesheets, especially if they grow very large.
.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }
<div class="footer page1">
Some text here
</div>
You could also add the class to the container of the entire page or something, which may make more sense. That way you can manipulate the header and footer rulesets simultaneously:
.footer {}
.header {}
.page1 .footer {}
.page1 .header {}
You need to select <div class="footer" ID="page1"> by .footer#page1.
I would recommend to use class for page#, because ID should be unique in one page, but ID="page1" might be used frequently.
Finally result can be
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
.footer.page1
{
background-color: red;
font-color: white;
}
.footer.page2
{
background-color: blue;
font-color: white;
}
.footer.page3
{
background-color: white;
font-color: black;
}
with
<div class="footer page1">
Some text here
</div>