I am creating a div that will have a default style but is also going to have various options for different styles depending on the content. My goal is to be able to have these styles take effect only when nested inside of the custom class name. Kind of hard to explain verbally so I'll give some code examples of what I mean:
This will be the html structure for the default view:
<div>
<div class="default"></div>
</div>
This will be the html structure for the custom view:
<div class="custom">
<div class="default"></div>
</div>
So basically I need to be able to write a class that will say "redefine these styles on default only when default is nested inside of custom"
Really just looking for confirmation on the syntax involved here.
My first thought is to write something like:
.custom .default {
declaration: attribute;
}
I'm just a little unsure of whether this will only target default when it's inside of custom or if this will globally redefine default, I can't live test it just yet because ftp transfer hasn't yet been set up for me on this server.
Thanks in advance for any clarity on this!
Yes, that's right. This will target any .default contained by a .custom (at any point in its ancestry) (fiddle):
.custom .default {
color: red;
}
See the descendant combinator and others.
And yes, it can override declarations specified by .default (fiddle):
.default {
color: green;
}
.custom .default {
color: red; /* overrides green */
}
Have a look at selector specificity.
So, canon's answer is enough... But, just for the clarity that you asked.
You can restrict your selector to target only a nested element, with two methods:
Descendant Selector: It's written with a white space and targets the child element at any nested level inside the parent:
MDN ref docs
.parent .child {
/*styles*/
}
Child Selector: It's written with a > charachter, and targets the child only if it is directly nested, an immediate child:
MDN ref docs
.parent > .child {
/*styles*/
}
You were right. And if you want to make sure to target only the direct descendants, you can do this:
.custom > .default {
declaration: attribute;
}
That would be helpful in case you had something like:
<div class="custom">
<div class="default">
<div class="default"></div>
</div>
</div>
CSS will look for an element that has a class of default which is encapsulated within a parent with the class custom, any child nodes which match this rule will have the styling applied to them, you can create as many different themes for the same element as you wish, so long as you change the class.
So your code:
.custom .default {
declaration: attribute;
}
Is perfectly correct.
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;
};
I'm just working on a email html template and I came across this:
*[class=width100pc] { width: 100% !important; }
I've never seen something like this before. Is there a reason of using this syntax for selecting by class instead of just using
.width100pc {width: 100% !important;}
I know that CSS is kind of limited in email clients, is it somehow related to it?
You would use *[class=width100pc] to style any element where width100pc is the only class.
*[class=width100pc] { color: red; }
<div class="width100pc">Hello</div>
<div class="width100pc another-class">world!</div>
A standard class selector will apply regardless of other classes.
.width100pc { color: red; }
<div class="width100pc">Hello</div>
<div class="width100pc another-class">world!</div>
The one reason that comes to my mind is when class selector is not supported in a specific environment where this code is used, but can be bypassed by using attribute selector.
We're developing a large plugin based front-end system and trying to figure out how to compose CSS rules. Basically there are two ways:
Specify parents in the class name
Specify parents in the selector (by using LESS nested rules)
And the corresponding HTML:
<div class="dashboard">
<span class="dashboard__title"></span>
<div class="custom-widget">
<span class="dashboard__custom-widget__title"></span>
</div>
</div>
And for second approach:
<div class="dashboard">
<span class="title"></span>
<div class="custom-widget">
<span class="title"></span>
</div>
</div>
I want to specify specific style for .title inside .dashboard, so using the first approach CSS will look like that:
.dashboard__title {
//styles here
}
With the second approach CSS will look like this:
.dashboard .title {
//styles here
}
which takes advantage of LESS nesting capabilities:
.dashboard {
.title {
//styles here
}
}
We really like the second approach as it makes LESS stylesheets easy to read by collapsing rules specific to any particular element and it also allows for short style names. However, it has a problem, which is cascading - in the case at hand styles defined for .title inside .dashboard will also be applied for .title inside .custom-widget. If we use the first approach the doesn't happen.
Please advice on ways to use LESS nesting capabilities but avoid the problem described.
EDIT:
It seems that I've found a solution which combines two approaches:
.custom-widget {
&__save-icon {
&--active {
padding: 777px;
background-image : url('');
}
}
}
Produces this kind of class:
.custom-widget__save-icon--active
Just choose your element by selector like below:
This style affects only for immediate children of a .dashboard element which have class .title.
.dashboard > .title {
//styles here
}
I think the question is a bit ambiguous because there is no »do it that way« answer possible. BUT some reasoning will hopefully give some hints. I think the first question you should pose yourself is: will a span.title happen to appear in other places too, so that the style rules for it can be reused.
In this case you could start out by abstracting the style definitions like that:
html:
<div class="plugin dashboard">
<span class="title">Hey There!</span>
</div>
scss:
//general rules for each title in each plugin
div.plugin {
span.title {
}
}
//override or specify
div.dashboard {
span.title {
}
}
This way, by adding a second class you can take advantage of cascading nature of CSS and with tools like LESS or SASS you can guarantee that the order of style rules will be preserved.
Otherwise, if you just want to make sure that your style rules only apply for elements inside the .plugin__container, just scope it as you did in the question and take care that the outermost »main entry point« is unique enough.
div.plugin-namespace {
//all your rules here…
}
I hope It helped! Good Luck!
Can anyone explain me what does the below css do?
.validate-error .validate-error {
color: #cc2424;
display: inline-block;
margin-top: 5px;
}
.make-switch + .validate-error {
margin-left: 10px;
}
In the first css i see the same class name used twice?. Is this css valid?. I came across this thread
What is the difference between the selectors ".class.class" and ".class .class"?
but unsure whether its applicable if we use the same class name twice?.
The first one styles child elements/descendant with the same class name:
<div class="validate-error">
This color may be different from #cc2424
<div class="validate-error">Has color #cc2424</div>
</div>
This means: The styles are applied/overwritten for child elements with the same class name.
The second one styles siblings:
<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>
That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.
Demo
Try before buy
.validate-error .validate-error {
...
}
This css targets a class .validate-error that is a descendant of .validate-error.
For example
<div class="validate-error">
<div class="validate-error">
</div>
</div>
Next css targets the class .validate-error when it is right next to .make-switch
.make-switch + .validate-error {
...
}
when selector parts are stuck together without whitespace it means it should all match the same element.
example: (should only match an element having both validate-error and other-class as classes)
.validate-error.other-class
when there is whitespace between them you are selecting an element that has other-class as a class and has a parent element with the validate-error class
the + in your second selector actually means you don't want a child of make-switch but you want the sibling element, but only if it has class validate-error
Yes it is valid. There are no rules in CSS preventing a class name appearing multiple times in a complex selector. There are no rules in HTML preventing two elements, one of which is a descendant of the other, from sharing membership of a class.
Id only should be unique, but classname we can use multiple times.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css