This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 5 months ago.
I'm using UI Library(Vuetify) and this is the code it has:
.sample[data-2] {
color:red;
}
and I want to overwrite all the elements having .sample classes like this:
.sample {
color:blue;
}
If i use '!important' then it surely works,
but I want better solution to overwrite .sample[blabla] class.
I've tried .sample[*], .sample[] ... it didn't work
You can increase the specificity of your CSS by including :not pseudo class with a # id name.
The id name needs to be one not used elsewhere.
div {
margin: 10px;
}
.sample[data-2] {
color: red;
}
.sample:not(#nonExistentId) {
color: blue;
}
<h2>All these lines should be blue</h2>
<div class="sample">a div with class sample</div>
<div class="sample" data-2>a div with class sample and attribute data-2</div>
<div class="sample" anyoldattribute>a div with class sample and any old atrribute</div>
See MDN for a fuller explanation.
In particular if you need to support older browser versions you could use combinations of :is, :matches and so on.
This question already has answers here:
How can I apply CSS style changes just for one page?
(4 answers)
Page-specific css rules - where to put them?
(11 answers)
Closed 2 years ago.
I need to use the following styling for a specific page on my website:
*::-webkit-input-placeholder {
color: #909090 !important;
}
But I don't want it to be applied to the whole site, but only to a specific page.
How can I achieve that with only CSS. (I cannot use Sass on this site, only CSS)
The easiest way to achieve your goal is to add an id to the body tag of your specific page. It's also a good idea to at least add the vendor-prefix for firefox as well.
The * isn't needed for the css selector to work by the way.
#my-id ::-moz-placeholder, /* Firefox 19+ */
#my-id ::-webkit-input-placeholder /* Chrome/Opera/Safari */
{
background-color: red;
}
<body id="my-id">
<form>
<input type="email" placeholder="some#one.com">
</form>
</body
You can give the parent element of your html a class name
Example:
html page:
<div class="page"></div>
css:
.page {*your styles*}
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
CSS attribute selector for class name
(1 answer)
attribute selector for class starts with and ends with
(1 answer)
CSS attribute selector class starts with but not equals to
(2 answers)
Closed 3 years ago.
I set dynamically classes on elements with class names "displayIfYes_%%" where %% comes from a database and can have a lot of values.
I am trying to set a simpler CSS selector for the classes I don't want to display, but I can't find how to do it.
I have a working solution to display elements only when value is "yes" using this CSS:
.displayIfYes_yes {visibility: inherit !important;}
.displayIfYes_na,
.displayIfYes_no,
.displayIfYes_scaled,
.displayIfYes_raw
/* ... and so on for any additionnal value */
{display: none !important;}
I want a selector to select any element which has class which begins with "displayIfYes" but does not end with "yes".
you can use selector [attribute|="value"] in this case your attribute can be class.
So:
[class|="displayIfYes"]{
/* */
}
will select class attribute which starts with that. The only complication is class attribute can have more than 1 class so this solution might not always work.
In that case I recommend using different classes for different scenarios from the database. You can create a class for each scenario such as;
.na,
.no,
.scaled,
.raw {
/* other styles */
}
.displayIfYes {
display: none !important;
}
The traditional way to solve this problem is to use a “base” class, then override with more specific classes. In your case, this would be:
.display-if-yes {
display: none;
/* Other styles which apply to all types */
}
.display-if-yes-yes {
display: unset;
visibility: inherit;
}
<div class="display-if-yes display-if-yes-yes">Yes</div>
<div class="display-if-yes display-if-yes-no">No</div>
<div class="display-if-yes display-if-yes-other">Other</div>
If you are unable to change your class structure for some reason, this should work for your specific requirements:
.displayIfYes_yes {
/* visibility: inherit; */
color: red;
}
*[class^='displayIfYes_']:not(.displayIfYes_yes),
*[class*=' displayIfYes_']:not(.displayIfYes_yes) {
/* display: none; */
color: green;
}
<div class="displayIfYes_yes">displayIfYes_yes</div>
<div class="displayIfYes_no">displayIfYes_no</div>
<div class="displayIfYes_other">displayIfYes_other</div>
I’ve commented out your specific styles just for the sake of the demo.
Here's a solution without using the :not() selector, instead only relying on attribute and class selectors and the underlying specificity.
Also, you can't override display: none; with visibility: inherit. Use display: initial instead.
[class^="displayIfYes_"] {display: none;}
.displayIfYes_yes {display: initial;}
<div class="displayIfYes_yes">div.displayIfYes_yes</div>
<div class="displayIfYes_na">div.displayIfYes_na</div>
<div class="displayIfYes_no">div.displayIfYes_no</div>
<div class="displayIfYes_scaled">div.displayIfYes_scaled</div>
<div class="displayIfYes_raw">div.displayIfYes_raw</div>
This question already has answers here:
Apply CSS Style on all elements except with a SPECIFIC ID
(3 answers)
Closed 6 years ago.
How do I cancel the changes to one individual element in CSS?
Example:
a {
text-decoration: line-through;
color: green;
}
Now I would like at the end, a.test to ignore all rules and be displayed in the default way.
The normal colors and decorations of a link would show up on a page without any CSS influence.
All I found was to change every property that changes the element to initial. Is there a universal command that would exempt a.test from all changes?
You can exclude with the :not() CSS pseudo selector
a:not(.test) {
text-decoration: line-through;
color: green;
}
Demo: https://jsfiddle.net/azizn/d17vdf35/
This question already has answers here:
Is it possible to exclude all css styling for one specific div container?
(2 answers)
Closed 8 years ago.
I have defined a style for input elements in HTML,
e.g.
input { font-family: Cambria; font-size: 13pt; }
So it by default applies to all the input elements I write in the page.
Now I want one specific input element with no style; can I do that?
The element selector has a lower priority than the class selector, so you can just add a class:
.special-input { font-family: sans-serif; font-size: 10pt; }