This question already has answers here:
How to Style a disable DIV element
(3 answers)
Closed 5 years ago.
I am trying to style disabled state for div I have code
<div disabled> Welcome </div>
<style>
div:disabled{
background-color:#f1f1f1;
}
</style>
I don't have any class or ID present on the element. It is system generated. I want make the background color light gray.
Try to use the Attribute Selector:
div[disabled]{}
See for more Information:
https://www.w3schools.com/css/css_attribute_selectors.asp
This can be achieved using attribute selectors, in this case "disabled" is the given attribute:
div[disabled] {
background-color: #f1f1f1;
}
For more information, here is a very useful reference guide to using data attributes on MDN
Here is the specific guide on Attribute Selectors
Attribute selectors select an element using the presence of a given attribute or attribute value.
In the div, disabled is an attribute. So use an attribute selector.
<div disabled> Welcome </div>
<style>
div[disabled] {
background-color:#f1f1f1;
}
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
css to Attribute
div[disabled]{
background-color:#f1f1f1;
}
Related
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:
CSS: Change parent on focus of child
(5 answers)
Closed 3 years ago.
<div id="my-field">
<label class="my-label">Label</label>
<input class="my-input" value="input" />
</div>
#my-field{
}
.my-label {
}
.my-input{
}
Is there any way I can customize the CSS of .my-label when input is in focus without touching the HTML? There are multiple ways to select successor sibling elements. But any way to select predecessor(s)?
Note: There is a restriction in the project that HTML cannot be modified here. Everything has to be done in CSS only. No jQuery/JS either.
Here is one way you can do it without changing your HTML structure.
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus
Note that example uses :focus-within on the entire form and on interior input-wrapping <div>.
Learn more about :focus-within selector.
#my-field:focus-within .my-label {
background: red;
}
<div id="my-field">
<label class="my-label">Label</label>
<input class="my-input" value="input" />
</div>
Please let me know if this helps.
If there is only one input field in #my-field, you can try :focus-within:
#my-field:focus-within .my-label{ ... }
No. there is unfortunately no predecessor selector in css
input:focus -+ label { ... }
would be lovely.
having the label after the input would be dooable:
input:focus + label { ... }
you could use some positioning to display before...
In this case (since the input doesn't have any other siblings), you can use the sibling CSS selector ~.
input:focus ~ label {...}
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:
CSS :selected pseudo class similar to :checked, but for <option> elements
(4 answers)
Closed 8 years ago.
I have an issue about selecting element inside the dropdown. Here is the fiddle: http://jsfiddle.net/H656H/
<select id="razred" name="razred">
<option hidden selected><?php echo $razred; ?></option>
<option>1.A</option>
<option>1.B</option>
<option>1.C</option>
<option>1.Č</option>
<option>1.D</option>
<option>1.E</option>
<option>2.A</option>
<option>2.B</option>
<option>2.C</option>
<option>2.Č</option>
<option>2.D</option>
<option>2.E</option>
<option>3.A</option>
<option>3.B</option>
<option>3.C</option>
<option>3.Č</option>
<option>3.D</option>
<option>3.E</option>
<option>4.A</option>
<option>4.B</option>
<option>4.C</option>
<option>4.Č</option>
<option>4.D</option>
<option>4.E</option>
</select><br />
So, I want to style the element after the user clicks it. So, only when user select an his selection receives a styling.
I think there has to be some kind of CSS pseudo-selector for this selected element inside dropdown.
Are there any CSS selectors for that?
Thank you all!
There is no pseudo selector for marking select boxes the way you imagine. So the answer to your original question is No :(
But if you dont mind using a tiny bit of JavaScript then you can emulate the feature you desire. You can add a class to the select box's onchange method. Ideally this should be done from the bottom of the page inside a script tag. I m doing it inline only as a demo:
<select id="razred" name="razred" onchange='this.className="visited"'>
And then you could just define the custom class the way you want
.visited {
color: #f00;
-webkit-appearance: none; /*required for webkit based browsers*/
}
JSFiddle: http://jsfiddle.net/9K5h2/1
Edit: removed incorrect part of answer.
The answer to your actual question regarding css:
From a previous question
#razred option:checked { color: red; }
The focus selector will do something that's close to what you are looking for
#razred:focus{
color: blue;
}
Updated fiddle
Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example:
<div class="my_class">
My Link
</div>
I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle.
I do not have the ability to change page layout, however, I can use a custom CSS file that is included automatically.
Thank you
It sure is, using what's called attribute selectors; these are part of CSS2. In your particular case, you'd use:
div.my_class a[title="MyTitle"] { color: red; }
You can read more about attribute selectors here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Yes you can:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
You would say A[title="MyTitle] I believe.
What you are looking for is css attribute selectors:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
a[title]
{
...
}
CSS specifications identify a number of "selectors" that may help you here. For example, you could apply a rule such as the following:
.my_class a[title="MyTitle"]
{
...
}
You can see a detailed specification of CSS "selectors" here:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
Although it is possible, using attribute selectors (see http://www.w3.org/TR/CSS2/selector.html#attribute-selectors ) Internet Explorer 6 does not support it (see http://kimblim.dk/css-tests/selectors/ )
An example from the W3C site: H1[title] { color: blue; }