This question already has answers here:
What's the difference between CSS3's :root pseudo class and html?
(4 answers)
Closed last year.
I often see people use this line in CSS at the beginning of the .css code. Can someone explain what is it used for? I know that is used for defining the style of the highest parent, but i dont know what that means.
As you're already aware:
From this page: CSS-Tricks :root selector
The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree.
This page provides syntax as well: developer.mozilla :root{}
Here's an example you can run:
:root {
background-color: cornflowerblue;
padding: 3em;
}
body {
background-color: white;
padding: 1.5em;
}
<p>We can take advantage of being able to apply CSS to the <code><html></code> element to skip the wrapper <code>div</code> and keep our markup clean!</p>
Related
This question already has answers here:
How to create a css rule for all elements except one class?
(3 answers)
Closed 8 months ago.
How do I select all but one instance of an element?
for example, my link or <a> elements have a particular color, but there's this one a element I don't want the color to to apply.
I want the link element to have the same color as the remaining text
There is a :not selector in CSS. This will apply styles to everything, except elements that the not selector will target.
So, you could style the colors of all anchor tags except ones that you put a specific class on like:
a:not(.dontBeRed) {
color: red;
}
You can also target exceptions other ways. Lets say you have a few custom color utility classes, you could ignore elements that have any class with a certain prefix.
This will style all anchors red unless they have a class that starts with u-color on them.
a:not([class*='u-color']) {
color: red;
}
.u-color--green {
color: green;
}
.u-color--blue {
color: blue;
}
This question already has answers here:
Is it possible to reference one CSS rule within another?
(6 answers)
Closed 5 years ago.
Suppose I have a CSS class:
.text-red {
color: red;
}
This class is defined elsewhere, may be supercomplex, and is not editable.
In my DOM I have several paragraphs. I want to apply text-red class to all paragraphs. Of course I may write that directly:
<p class="text-red">XXX</p>
<p class="text-red">YYY</p>
<p class="text-red">ZZZ</p>
<p class="text-red">WWW</p>
but it is so redundant. I'd like to write in my CSS file something like:
p {
.text-red
}
so that all "p" elements have that class applied.
Clearly this is not a CSS valid rule. How may I do?
You can easily do so with SASS pre-processor by using #extend.
https://sass-lang.com/guide
Ohterwise, you could use JavaScript (jQuery) as well:
$('p').addClass('.text-red')
But maybe the easiest would be to copy the properties to the p selector?
This is valid CSS:
p.text-red { color: red; }
Referring you to Child combinator:
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
example
.text-red > p {
...
}
this selects all the p children of .text-red class
This question already has answers here:
What's so bad about in-line CSS?
(20 answers)
Closed 6 years ago.
I see this happening more and more often.
I was always taught to keep html, css and javascript separate (with html linking to the sources/scripts of course).
I understand sometimes if you're sending an email then using the style attribute in html is sometimes ok and preferred.
However when constructing a website, or application is it considered bad practice to use the style attribute?
<div style="margin: 0 auto; width: 114px; height: 32px; text-align: center; font-family: arial; padding: 25px; border-radius: 50px; line-height: 32px; background: rgb(46, 154, 255);">Hello world</div>
Yes, it is bad practice. Here are a few reasons:
You cannot reuse css code if it is inline (it only applies to the element it is on) so you land up writing extra code that does the same thing (e.g. you have two paragraphs of text that need to be styled the same - if you use the style attritibute you now have to copy and paste the style for each paragraph.)
Your code will be harder/impossible to maintain - imagine if you had to change the font on your page. If it is declared inline like this it means going to each place to find and change the code.
You cannot easily override the CSS styles. Properties that are declared inline have the second highest priority. The only way to override a property declared inline in a CSS stylesheet is by using the !important keyword.
This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 8 years ago.
I have an application where styles are defined as
select {
border: 1px solid #6FA7D1;
outline:0;
height:25px;
padding-left: 5px;
font-family:Arial;
font-size:12px;
transition: all 0.8s;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
so, every <select></select> will get the same style, which is expected, but, I'm using some third party plugins like jqGrid and I don't want to apply same style on for instance <select> rendered in jqGrid pager. This <select> has some class.
Is there some way to tell in CSS not to apply on DOM with certain class?
Please don't focus strictly on this <select> in jqGrid, I have more situations when I can use such exclusion.
You can use the :not selector to prevent application under certain circumstances, e.g:
:not(selector) select
Where selector relates to either a jQGrid id or class
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector.
This basically says target select elements which arent a child of selector (in this case jQGrid)
You can use :not to exclude any subset of matched elements.
:not(div) > span {
color: red;
}
<span>Make me red!</span>
<div><span>...but not me...</span>
</div>
http://jsfiddle.net/iaezzy/1s5g5mjn/
.element:not(.exclude) {
background: green;
}
.exclude {
background:red;
}
What about Can I write a CSS selector selecting elements NOT having a certain class? in CSS3?
select:not(.someClass) {
/* Styles */
}
You can't, the only option would be to:
Put the <select> styling into a class, e.g. .select, and add that <select class="select"> to all elements that you want to be styled.
Add a class, e.g. select-jqGrid, that overrides all default styling from the select and add that to all <select> elements inside the jqGrid.
This question already has answers here:
Twitter bootstrap override `a` in `navbar`
(3 answers)
Closed 9 years ago.
bootstrap.css is overriding my style... How can I avoid this to happen? How can I force the css to load first?
One thing that is a problem is that the website where it needs to be is using #import to load the css files (this cannot be changed, the customer doesn't want to change that).
Any ideas?
***Note****
I cannot modify the current site at all. I just have to include bootstrap.css without overriding anything else. Is this possible?
You need to write a more specific selector. Remember that ID has the most weight. You can temporarily mark it with !important to check if you are targeting it correctly.
If you are targeting a anchor in a list item for example then to overwrite the reset styles you can write something like nav ul li a{color: black;}
You simply have to increase the specificity of your rules. This means adding more to your selectors, say you have .elem { color: blue; }, you can make it .parent .elem { color: blue; }
Or using !important, like .elem { color: blue !important; }