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
Is this CSS code valid? If not, how will it affect the rest of the page?
<style type="text/css">
.detpage .fieldarea-row { position: static;!important;}
</style>
You have 1 semicolon too much. But shouldn't impact the rest.
<style type="text/css">
.detpage .fieldarea-row { position: static !important;}
</style>
No, it's not valid. your !important is just dangling there because youv'e "closed" the declaration early:
.detpage .fieldarea-row {
position: static !important;
^---- no ;
}
as for what it'll do. no way to tell. css just gives some rules to change layout/looks when things match, but you've provided nothing to show what this rule would apply to.
I would go like this
.detpage .fieldarea-row { position: static !important; }
and put the style in a separate CSS file, to avoid mixing CSS with HTML codes.
http://jigsaw.w3.org/css-validator/validator says that it's invalid, and that therefore the entire statement is invalid/ignored.
I'm not sure whether it's true though that the whole statement will be ignored (because that contradicts my understanding of CSS error recovery specification).
Related
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 2 years ago.
Improve this question
just so you know, I CAN NOT MODIFY ON JAVASCRIPT, I CAN ONLY ADD CUSTOM CSS
I have this website
https://elt.sa
you can check the last <section> tag
I want to select it in css so I can change the color of it
I can see that it's the last section! but it's not getting selected until I write
nth-last-child(18) and sometimes 19 !
check the images below, and you can inspect the website above and modify on <style> tag inside header , (the second one)
If it is always last then you can use :last-of-type, for more details check this CSS Selectors
section.section:last-of-type {
background: #cc3329;
}
section.section:last-of-type - it selects every section.section element that is the last section.section element of its parent.
you can do it also by javascript or css
for javascript
let section = document.querySelectorAll('section');
section[section.length - 1].style.background = 'red'
or css
section:last-of-type{
background: 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 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 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 3 years ago.
Improve this question
Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)
For historical reasons I have these CSS rules:
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.
But. The value is "20.8px".
What is going on?
If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.
Maybe you zoomed in on browser? Set a different font-size on your OS?
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
<p> Here be text </p>
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 7 years ago.
Improve this question
hello i have two codes to understand the first question is how does the * get rid of my LI list styling when i not told css to do so this is the code that getting rid of the bullet points
*{
margin:0;
padding:0;
box-sizing:border-box;
}
and my second question is about div classes i was clawing though facebook's html makeup looking for ideas and i want to know why facebook use a lot of div classes for css when most the code i looked at could easy have been put in one css class i understand css and code being reusable but most of it was just for one div and not use any where else so why would you use multi css statements for one div is this because of readability or optimization or and i missing something and sorry about my english and punctuation
To get the margin and padding back to the <ul><li> just set it after you used the * see here: http://jsfiddle.net/8mbrn3ra/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul, li {
margin: 10px;
padding: 10px;
}
The other part of your question: I don't know why facebook does the things it does. But one reason could be that you have a div as a wrapper of things. If this div has a class with given styles and you want to use them somewhere else you just need to set the class to the wrapper. Understand what I mean?
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.