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
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:
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>
This question already has answers here:
Is it possible to give one CSS class priority over another?
(7 answers)
Does repeating a classname in a CSS rule increase its priority?
(2 answers)
Can type selectors be repeated to increase specificity?
(1 answer)
Closed 2 years ago.
There is a situation that I need to change the class priority. For example:
.one {
color: green;
}
.comment {
color: gray;
}
.red {
color: red !important;
}
<div class="one two red">Content</div>
<div class="comment two red">Content</div>
At the moment, .red color is applied. Is it possible to force .comment.red to get the color from .comment?
Note: The .comment color is unknown (comes from changeable themes).
Yes, you can use multiple classes to make it more specific. Also, we know that .comment.red needs to have min two classes. So I feel this is allowed:
.one {
color: green;
}
.comment.comment {
color: gray;
}
.red {
color: red;
}
<div class="one two red">Content</div>
<div class="comment two red">Content</div>
But please get rid of !important.
The .comment's rule, instead of it being like this:
We can make it like this:
More Explanation
Modern browsers compute the style contexts using the rule tree. If multiple rules have the same weight, origin and specificity, the one written lower down in the stylesheet is considered and wins.
When there's only one selector here:
.class1 {}
The weight of the above rule is 0010 as per CSS specificity. The same way, if there are two classes:
.class1.class2 {}
.class1.class1 {}
Note that in the second line, I have written twice the same class. Both will be computed to 0020, which is higher than the first one, in spite of the "unknown" class, we have two classes in the rule now.
This is the same trick I used in the above example to make the theming easier.
I was creating a navbar that has a class top-navbar. I included a few anchor tags in the div. When I used the CSS property color: black on the class, the anchor text was still blue(the original color). Instead when I used the property color: black on the anchor tag itself it works? Why doesn't it work on the class property, isn't it inherited by all elements that follow in the div with class = nav-bar-items The markup is as follows:
<div class="top-navbar">
<img class="logo-img" src="https://freesvg.org/download/47093">
<div class="nav-bar-items">
about
notes
contact
</div>
</div>
There are lot of solution you already know how to turn your anchor text black.
But your question was why is is not inheriting? Here is my explanation of why it didn't work for you for provided css.
CSS Specificity
Rule to calculate specificity is defined by {style, ids, [classes, attributes and pseudo-classes], [elements and pseudo-elements] }
If we calculate the specificity of selectors on anchor tag, we will have the answer.
a:-webkit-any-link (User Agent) -> 0011 (1 for pseudo-classes and 1
for element)
.top-navbar -> 0010
So clearly here user agent styling wins and take over so the color is still blue, check below snapshot.
Reference to read more about it -
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://specificity.keegan.st/
https://css-tricks.com/specifics-on-css-specificity/
I honestly don't know why and I am pretty sure it was already answered here on SO, but why even bother with it when you can just target your links? Just some Examples, there's even more ways:
.nav-bar-items a {
color:red;
}
.nav-bar-items > *{
color:red;
}
Read about selectors:
CSS_Selectors
The a tags are getting browser default styling and need something more specific to override it:
.nav-bar-items a {
color: black;
}
The <a> tags are loaded with default styling properties. There are different methods to customize.
1. By using inheritance
.nav-bar-items > a {
color: inherit;
text-decoration: inherit;
};
2. override
.nav-bar-items a {
color:color-name;
};
3. This one is only, if your parent class has a single child <a> tag then you can use it.
a:only-child {
color: color-name;
};
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.