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!
Related
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.
This is driving me nuts:
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
Doesn't this read, "Select all h1 elements that have an ancestor that is not a div element...?" Thus, "Hello World!" should not be coloured red, yet it still is.
For the above markup, adding the child combinator works:
*:not(div) > h1 { color: #900; }
But doesn't affect the h1 element if it is not a child of a div element. For example:
<div><article><h1>Hello World!</h1></article></div>
Which is why I'd like to indicate the h1 element as a descendant, not a child, of the div element. Anyone?
Doesn't this read, "Select all h1 elements that have an ancestor that is not a div element...?"
It does. But in a typical HTML document, every h1 has at least two ancestors that are not div elements — and those ancestors are none other than body and html.
This is the problem with trying to filter ancestors using :not(): it just doesn't work reliably, especially when the :not() is not being qualified by some other selector such as a type selector or a class selector, e.g. .foo:not(div). You'll have a much easier time simply applying styles to all h1 elements and overriding them with div h1.
In Selectors 4, :not() has been enhanced to accept full complex selectors containing combinators, including the descendant combinator. Whether this will be implemented in the fast profile (and thus CSS) remains to be tested and confirmed, but once it is implemented, then you will be able to use it to exclude elements with certain ancestors. Due to how selectors work, the negation has to be done on the element itself and not the ancestor in order to work reliably, and therefore the syntax will look a little different:
h1:not(div h1) { color: #900; }
Anyone who's familiar with jQuery will quickly point out that this selector works in jQuery today. This is one of a number of disparities between Selector 3's :not() and jQuery's :not(), which Selectors 4 seeks to rectify.
The <html> element is not a <div>. The <body> element is not a <div>.
So the condition "has an ancestor that is not a <div>" will be true for all elements.
Unless you can use the > (child) selector, I don't think you can do what you're trying to do - it doesn't really make sense. In your second example, <article> is not a div, so that matches *:not(div) too.
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.
I'm working on a design for a blog. Is there a css selector (or other way that doesn't involve the user adding a class or id to a blockquote tag) that will allow me to differentiate between a blockquote that occurs at the very beginning of a div from a blockquote in the middle of a div after some text blocks?
That is, I'd like blockquotes that are the start of a blog post to have one set of css styles, and blockquotes that occur in the body of a blog post to have other style parameters.
Is this possible?
Simply:
div > blockquote:first-child {
...
}
JSFiddle demo.
This combines the child combinator (>) with the :first-child structural pseudo-class to select the div element's direct child blockquote element only if that element is the first child.
To then style blockquote elements which aren't the first child, you'd simply use the div > blockquote selector, as this has lower specificity than the one above.
You are looking for nth-child by the sounds of it.
Read this: http://css-tricks.com/how-nth-child-works/
It's a silly question, but well. What version is the ">" in CSS? I can't find it in google because I don't know the name of this.
Example.
CSS
.test {
width:200px;
height:200px;}
.test .color {
width:50px;
height:50px;
float:left;
background:red;}
.test:hover > .color {
background:blue;}
HTML
<div class="test">
<div class="color"></div>
</div>
What version of CSS it is? 2 or 3? thanks
It marks the immediate child of a node. Hence its name "child selector".
So in your case .test:hover > .color selects any node with the class color that is an direct child of a hovered node with class test.
For more information have a look at the respective MDN page.
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.
That is called the child selector, and it is part of CSS2.
Documentation at http://www.w3.org/TR/CSS2/selector.html#child-selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The selector is for direct descendants.
So div > div will select all div elements that have a direct parent element that is also a div.
It is CSS 2.
It was recommended for CSS 3 selectors as well.
See on MDN.
That would be a CSS selector for that is directly below (in the document tree) another element. As in it's child element.
This CSS3 cheat sheet is very helpful: CSS3 Cheat Sheet, not only for answering the question you have but other uncommon selector types.
You can also find what is supported on what browswers with this: Can I use... Support tables for HTML5, CSS3...