I was looking at the CSS for a CSS Menu Maker design, and it uses a syntax I haven't seen before.
#cssmenu > ul > li.has-sub.active > a span {
background: url(images/icon_minus.png) 98% center no-repeat;
}
The li.has-sub.active part - is that saying 'a li that has the classes has-sub and active'?
I also haven't seen an instance before of combining the syntax for 'child of' with the syntax for 'has this class'. Is that good practice?
When you have a selector that includes several . (class) indicators, then that means the element must have all listed classes
li.has-sub.active is saying that it selects <li> elements which also must have the class "has-sub" and "active".
As for "Is this good practice?", in my opinion it is. All it does is allow for the ability to be more restrictive with the style selection. This can save time and also is a good way to provide a hook for other types of dom selection in JavaScript.
MDN
CSS Selectors
For more information on CSS Selectors, the Mozilla Developer Network has very good information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors .
CSS Specificity
In addition, different selectors have different weights. This can cause certain selectors to take precedence, and properly planning for that means taking "Specificity" into account which is also at play here in your example. The MDN has a good article on that subject as well: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity .
Two selectors together with no space inbetween them are selecting the same element. It is a normal use of CSS, not bad practice at all.
According to MDN:
You can also combine selectors, making a more specific selector.
For example, the selector .key selects all elements that have the class name key. The selector p.key selects only <p> elements that have the class name key.
You are not restricted to the two special attributes, class and id. You can specify other attributes by using square brackets. For example, the selector [type='button'] selects all elements that have a type attribute with the value button.
For example:
div.classname{}
Will select <div class="classname"></div>
span#elementid.classname
Will select <span id="elementid" class="classname"></span>
.classname.classtwo
Will select <span class="classname classtwo"></span>
In your CSS, the selectors:
#cssmenu > ul > li.has-sub.active > a span
Would select a HTML structure like:
<div id="cssmenu">
<ul>
<li class="has-sub active"><a><span>I am selected</span></a></li>
</ul>
</div>
And here is a nice little demo
That's the right way, as you may need to add multiple classes for a single element and have different styles inherited. You can think of Multiple Inheritance as a crazy comparison.
#cssmenu > ul > li.has-sub.active > a span {
}
Then it selects:
#cssmenu - ID
ul - directly inside the above element (because of >).
li - directly inside the above element (because of >).
.has-sub.active - LI with both the classes.
This is absolutely the right way to write CSS. Because, this will be something aligned with Modular CSS and you can mix and match different CSS component styles.
Related
I'm trying to figure out why one of my css classes seems to override the other (and not the other way around)
Here I have two css classes
.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}
.smallbox-paysummary {
#extend .smallbox;
font-size:10px;
}
and in my view I call
<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">
The font (The overlapping element) shows up as 10px instead of 20 - could someone explain why this is the case?
There are several rules ( applied in this order ) :
inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.
In your case its rule 3 that applies.
Specificity for single selectors from highest to lowest:
ids (example: #main selects <div id="main">)
classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
elements (ex.: div) and pseudo-elements (ex.: ::before)
To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.
Example: compare #nav ul li a:hover to #nav ul li.active a::after
count the number of id selectors: there is one for each (#nav)
count the number of class selectors: there is one for each (:hover and .active)
count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.
A good article about css selector specificity.
Here's a compilation of CSS styling order in a diagram, on which CSS rules has higher priority and take precedence over the rest:
Disclaimer: My team and I worked this piece out together with a blog post (https://vecta.io/blog/definitive-guide-to-css-styling-order) which I think will come in handy to all front-end developers.
What we are looking at here is called specificity as stated by Mozilla:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of different sorts of CSS selectors.
Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When multiple declarations have equal specificity, the last
declaration found in the CSS is applied to the element. Specificity
only applies when the same element is targeted by multiple
declarations. As per CSS rules, directly targeted elements will always
take precedence over rules which an element inherits from its
ancestor.
I like the 0-0-0 explanation at https://specifishity.com:
Quite descriptive the picture of the !important directive! But sometimes it's the only way to override the inline style attribute. So it's a best practice trying to avoid both.
The order in which the classes appear in the html element does not matter, what counts is the order in which the blocks appear in the style sheet.
In your case .smallbox-paysummary is defined after .smallbox hence the 10px precedence.
First of all, based on your #extend directive, it seems you're not using pure CSS, but a preprocessor such as SASS os Stylus.
Now, when we talk about "order of precedence" in CSS, there is a general rule involved: whatever rules set after other rules (in a top-down fashion) are applied. In your case, just by specifying .smallbox after .smallbox-paysummary you would be able to change the precedence of your rules.
However, if you wanna go a bit further, I suggest this reading: CSS cascade W3C specification. You will find that the precedence of a rule is based on:
The current media type;
Importance;
Origin;
Specificity of the selector, and finally our well-known rule:
Which one is latter specified.
Also important to note is that when you have two styles on an HTML element with equal precedence, the browser will give precedence to the styles that were written to the DOM last ... so if in the DOM:
<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>
...the width of the div will be 50px
AS is state in W3:
W3 Cascade CSS
the orden that different style sheet are applied is the following (quote from W3 cascading section):
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
More information about this in the referred W3 document
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
Inline css ( html style attribute ) overrides css rules in style tag and css file
A more specific selector takes precedence over a less specific one.
Rules that appear later in the code override earlier rules if both have the same specificity.
In a simple and short way, one should keep in mind the two things below:
Inline CSS has a higher priority than embedded and external CSS.
So final Order is: Value defined as Important > Inline > id nesting > id > class nesting > class > tag nesting > tag
I'm running a website on Wordpress. Whenever I have to do CSS, I go onto Appearance > Custom CSS. To find the element I want to target I use the Inspect tool.
However on this instance there is no element ID. As this a small browser window for allowing card payment, I cannot find the div ID using Inspector.
IMAGES
Not OK to CSS
OK to CSS
You may want to give the CSS Selector documentation a read. There are many ways to select an element without a distinct Class or ID, including by attribute, type, and even Combinators (which are probably the best way to solve this problem you're having).
You can start be selecting an ancestor of the element you want, such as the.woocommerce wrapper.
You could then use the Direct Child Combinator: > and select the .order_details element.
Now you can use the Adjacent Sibling Combinator: + to select the div that is its adjacent sibling.
(Note that the adjacent sibling combinator is used here, not the General Sibling Combinator: ~, otherwise it would select all divs that are a later sibling of .order_details.
The following selector would probably be more than sufficient, and perhaps even a bit more specific than it needs to be (you may not need the >, but I put it in there for good measure - when using combinators on elements with no id or class, adding another layer of specificity usually doesn't hurt)
.woocommerce > .order_details + div { /* Styles here*/ }
If you're trying to override any of the inline styles on that div, you'll need to be more careful about the Specificity of the selector. Generally speaking there are 4 levels of specificity:
inline - ID - class - element
The Selector I gave you above has a specificity of 0021 (no inline, no ID, 2 classes, 1 element). However after your comment, it looks like you're trying to overwrite an inline style which has a gargantuan specificity of 1000. So if you apply any CSS that's not already defined inline, it should handily take effect. If you're changing any of the inline styles themselves, you'll need to make use of the _generally, but not always, bad-practice: !important Exception. Using !important will actually add a fifth order of magnitude to your specificity:
!important - inline - ID - class - element
So, if you're trying to change your inline background color, using the following:
.woocommerce > .order_details + div { background-color: #0095ee !important; }
Will give your blue background color an astounding 10021 specificity, which is higher than the inline grey's 01000.
Be very careful not to overuse !important - it's a tool that should be reserved for situations like this, and not just because you have a few CSS rules above that are slightly more specific.
Here's a handy CSS Specificity list, and a handy CSS Specificity calculator.
So when writing CSS, I often see people or websites have things like
.img > border > div > #select {color:white}
Since I have started web development, I have only used... single CSS classes.
I'm not sure that's entirely correct, but basically they are all connected.
What is the name of this technique, and do you guys have any useful resources I could read up about on this?
I did try and Google this pre-hand, but I simply didn't know how to word this on Google.
The entire sequence .img > border > div > #select is usually simply called a selector, since it's the part of the CSS rule that selects elements to apply the rule to. There is an entire specification devoted to selectors however; CSS just describes the role of a selector in a CSS rule.
> is a combinator, specifically the child combinator. Combinators are used to express relationships between two elements, in this case a parent-child relationship: .parent > .child. The rest, .img, border, div and #select are all simple selectors of various kinds.
A typical selector is made up of simple selectors and combinators. You can have a selector with just one simple selector .child, multiple simple selectors div.child, combinators #parent > div.child, or any combination of those.
The > sign is essentially a way of specifying that an element belongs to a parent element. In your case, the element with the id of "select" has a parent element that is a div that has a border that has a parent element that has a class of "img." More info here.
These are known as child selectors.
It's covered in the W3 specification, and the whole guide itself is a good resource with simple examples.
It's a selector and represents the HTML document element hierarchy that it applies to, i.e.
A class of image that has a border which has a div which has an ID of select, apply a color of white.
they're called CSS Selectors.
See here:
MDN
Here is a simple and brief explanation with the selector you provided
.img > border > div > #select {color:white}
The above CSS is a hierarchy of selector where, the rule is applied to #selector that is within div tag, border tag , and class .img
For example
<img class="img"><border><div><div id='select'>some content</div></div></border></img>
Here the above CSS rule is applied. Similarly rule can be created as follows
element>element
selector>selector
element>selector
selector>element
For more information check this out http://www.w3schools.com/cssref/css_selectors.asp
Hope this helps!
I read an article with some css file
#mainNav #toTop a {
float: right;
margin: 0 8px 0 0;
font-size: 40px;
}
Can someone explain why they have two # things in one css id type ? and how can I use it?
Thank you in advance
I don't know what you mean by a "CSS id type". So I'm just going to explain CSS in general, and we'll see if what this snippet is doing becomes clear.
In CSS you have selectors and property blocks. Your question is about a selector:
#mainNav #toTop a
Selectors are used to target (and on some other platforms to query) HTML (and sometimes XML) elements. This particular rule is using three simple selectors - two id selectors and a tag name selector - put together with two descendant combinators.
That means the selector will target (and the rule block accompanying it will affect) any anchor element (<a>) which is the descendant of any element with id=toTop which in turn is the descendant of any element with id=mainNav.
Since id elements are supposed to be unique, it might seem silly to have two of them in one selector. You can do it if you want to though, and sometimes you'll need to: we haven't spoken about selector specificity.
Specificity defines which rules take precedence over other rules. For example, if two elements both seem to target the same element:
form .label { color: blue; }
#contact-us .label { color: green; }
/* what color is the label? */
... then which rule takes precedence? To figure that out we calculate the specificity. I won't explain the math.
So, let's suppose you have a CSS stylesheet in your project which you can't change - it comes from a 3rd party vendor or something, and it looks like this:
#toTop a { /*...*/ }
If you needed to change the styling of the elements affected by that rule, what would you do?
You could (and probably would) define a new rule with greater specificity. One of the ways you can do that is by adding another id selector to your rule:
#mainNav #toTop a { /*...*/ }
But realistically you could just as easily add any other selector:
div#toTop a { /*...*/ }
Realistically whether it's necessary or not depends on what you're trying to do, what other rules it's interacting with, and what kind of HTML you're dealing with.
Here's another thing to consider: CSS stylesheets are meant to be re-used. What if that element should behave differently if it is in a different place in the document? What if the id="toTop" is sometimes inside the id="mainNav" element on some pages, and in a different place (let's say in the id="footer" element) on others? What if it moves, depending on client-side JavaScript? Then you might want to define CSS like this:
#mainNav #toTop a { /*...*/ }
#footer #toTop a { /*...*/ }
... so ultimately again, why a developer would choose to do this really depends on the CSS, JavaScript and HTML they are working with. It's definitely unusual, but it's not unnecessary nor bad practice.
ID must always be unique. However it is valid to use more than one id to make styles more specific.
In your example you are looking for an element with id #toTop inside #mainNav.
This is a perfectly valid CSS rule. It is very specific. The motivation for this use may have to do with how the page layout is designed and/or how JavaScript handlers interact with the DOM.
This is an example of poor CSS. The selector hierarchy in your example is redundant and unnecessary. It says select all a elements that are descendants of the element with the ID of toTop that is a descendant of the element with the ID of mainNav. So it assumes a basic structure like this:
<div id="mainNav">
<div id="toTop">
link
</div>
</div>
However, as IDs must be unique, only this is needed to target the same elements:
#toTop a
#mainNav #toTop a is using the Descendant Combinator to specify an element a descendant of an element with id toTop descendant of an element with id mainNav.
As said by other answers, this rule seems to be overly specific, because IDs must be uniques and then #toTop a should do the trick.
The real reason behind the choice of declaring this rule is:
Assuming that in a website you have one or more shared CSS (read:
you don't have an different CSS for every page), this rule means:
in a page where a is descendant of #toTop, but #toTop is descendant of an #mainNav element too, then apply this rule;
in a page where a is descendant of #toTop, but #toTop is NOT descendant of an #mainNav element, then DO NOT apply this rule;
because #toTop could be an reusable element that could be declared in different places (one-per-page, of course), for example inside the #mainNav in a page, and inside the #sideNav in another page, with a desired potentially different behavior and look-and-feel.
I came across these on the new job I just started. I don't have web experience so my knowledge is pretty basic. I'm not sure what the below do. I've never come across or used syntax like this before. I was able to find that the #TAFeedback will apply to any element with that id, but that's all I could dig up.
.howmanyinstate .ctrlHolder ol
{
width:90%;
float:right;
}
#TAFeedBack div.ctrlHolder table
{
background:none !important;
}
.howmanyinstate .ctrlHolder ol
applies the style to all ordered lists ol in an element that has a class ctrlHolder and that element is a child of an element with class howmanyinstate
For example:
<div class="howmanyinstate">
<div class="ctrlHolder">
<ol>
...
</ol>
</div>
</div>
A CSS rule identifies the element to which it applies by using a selector.
Here is a writeup on CSS Selectors
The following is a descendant selector: #TAFeedBack div.ctrlHolder table indicates that it applies to a table that is contained in a div that has the attribute class="ctrlHolder" which is contained inside an element that has id="TAFeedBack".
.howmanyinstate .ctrlHolder ol
applies to any ol element within any element with a class of ctrlHolder which is in itself inside any element with a class of howmanyinstate
I'm not sure if you already know this, but this is known as a "css selector". Perhaps something you might want to read up on.