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;
}
Related
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.
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 2 years ago.
so I'm editing this FANDOM wiki.
I have this element here:
<h1 class="page-header__title">Captain</h1>
As you can see "Captain" would be the article's name from the Wiki. Every article has their own subdomain link and will make the inner text of this element different.
Is there anyway I could simply only change the element's CSS if the inner Text equals Captain?
Hopefully you know what I'm trying to accomplish.
Here is a example of what I'm trying to accomplish:
.edit-info-user a[href$="/wiki/User:Potato"]::Before {
content: "( Bureaucrat ) ";
font-size: 9px;
color: #f00;
letter-spacing: 0.5px;
}
As you can see, this would only tamper with the element's CSS if the link equals "/wiki/User:Potato".
You can't.
You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element.
So the only way to do that without javascript would be to add data or a class.
Example :
h1[data-text=Captain] {
color: red
}
<h1 class="page-header__title" data-text="Captain">Captain</h1>
Here is a way by javascript, but I do not recommend it.
let title = document.querySelector('.page-header__title');
if (title.innerText === 'Captain') {
/* if you want to edit directly its style */
title.style.color = 'red';
/* if you want a class */
title.classList.add('.your-class');
}
<h1 class="page-header__title">Captain</h1>
You can try adding classList to the desired element with the matching class and make sure to create this class with the design that you want on your CSS file.
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:
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:
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.