What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.
Im implementing multiple rangesliders into my site and because this is code generated in real time I need to select some elements by their parents parent class.
this is the code the timeline class is the last one i can set myself and i need to be able to edit the .irs-line-right without changing my other sliders
In your question you stated that you want to access an element through a parent element. I don't see why this is necessary, but it's surely possible. You can change the element style, attribute, etc. through js. However, it's best to simply use css if you only need to change the style of the span with the class 'irs-line-right'. I'll show how to do this in both css and javascript.
CSS Example
In css you can change the style of the 'irs-line-right'
by referencing the 'timeline' div (and no other ids or classes) as follows:
https://jsfiddle.net/2t3w0826/
.timeline > div:nth-of-type(2) > span > span > span > span:nth-of-type(3)
{
background-color: red;
}
Javascript Example
https://jsfiddle.net/8qceLgw8/
var array_of_all_timelines = document.getElementsByClassName("timeline");
for(var loop=0; loop < array_of_all_timelines.length; loop++)
{
var element_irs_line_right = array_of_all_timelines[loop].children[1].children[0].children[0].children[0].children[2];
element_irs_line_right.style.backgroundColor = "red";
};
I am cloning an element and removing the id to avoid duplicates. Typically there will only be a class. In the event an end user chooses to use an id and style it, I want to ensure the style is preserved on the cloned element. Here is a rudimentary example.
/* css */
#unique {
background: yellow;
}
.general {
border: 1px solid blue;
}
/* html */
<div id="container">
<div id="unique" class="general">hello</div>
</div>
/* js/jquery */
$(function() {
$( ".general" ).clone().appendTo( "#container" ).removeAttr( "id" );
});
EDIT:
The linked duplicate provides a jQuery plugin solution. It uses .getComputedStyle method which works but is resource intensive since it loads all of the computed styles. I was hoping for a way to identify only the end user's couple of styles that they may have applied to an id.
id attribute needs to be unique but classes not. So bind all CSS rules to a class, so when you remove the id the styles will stay. It is a bad practice to use id selectors in CSS.
Then you can add a class only for that specific rule that you need to be unique and remove the class from cloned objects using $(...).removeClass() function.
I’m new to Radium and I’m finding it difficult to do some of the most simple CSS the Radium way. Here are some examples of where I’m getting hung up:
Descendant selector. I understand that there are methods to apply rules if there is a hover on the parent by setting up state logic, but I can’t seem to find a straight forward way to target elements of a parent. For example, any item with the .anchor class will be red. But if the .anchor is a descendant of a .listItem it should be blue. In css, I would simply do .listItem .anchor { color: blue; }. I can’t seem to find a simple way to do that.
Is there a way to target a specific element, like a or li? Or does it always need a class?
What about the adjacent selector, is there a Radium way to handle that? For example, .one + .two { color: blue; }
How can I select direct children? For example, .container > .ul { color: blue }, only targeting .ul elements that are the direct children of container
What if I want to give two classes the same style? Ex: .one, .two { color: blue }
I have a slideshow and for each slideshow I have an ::after element like this:
.views-field.views-field-title .field-content:after {
content: url('../images/myimage.svg');
position: absolute;
margin-left: -21px;
margin-top: -30px;
}
I want to create a link for the element but only the first link works, it doesn't work on subsequent slideshow items.
$('.views-field.views-field-title .field-content').after().click(function () {
window.location.href = "http://www.example.com";
});
Do i need to iterate over this using foreach?
The after method is used for inserting content after the selected element(s).
$('h1').after('<p>Small text</p>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Big Text</h1>
You can't directly select pseudo elements since they aren't actual DOM elements. So you won't be able to make the :after content clickable, what you have "working" at the moment is you're inserting some dummy element and making it clickable.
In this case, you should replace the :after content with a proper DOM element (such as a <a> tag) and style that element accordingly.