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...
Related
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.
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.
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 have a series of elements with the class .tab-pane attached to it. They also each have their own unique ID. I am trying to select every .tab-pane that does not have the id #home. I have tried .tab-pane:not#home{...} but it did not work. Any suggestions?
Sample HTML
<div id="home" class="tab-pane">...</div>
<div id="myself" class="tab-pane">...</div>
<div id="contact" class="tab-pane">...</div>
<div id="resume" class="tab-pane">...</div>
Try instead:
.tab-pane:not(#home) {
color: red;
}
JS Fiddle demo.
The thing that you're not-selecting appears within the parentheses of the :not() selector, rather than appearing as a 'chained' pseudo-selector.
In this specific case, since the element you want to have not-styled is the first element, you could also use the general-sibling combinator ~ to style subsequent siblings differently:
#home ~ .tab-pane {
color: red;
}
JS Fiddle demo.
But this would, and could, only work if the differently-styled (or un-styled) element is the first, since CSS can only select elements that appear later in the DOM, either as subsequent siblings, or descendants, of earlier elements.
References:
Selectors Level 3, negation :not() pseudo-class.
Maybe you meant to do this:
.tab-pane:not(#home)
You can access each of the individual classes by either using .tab-pane:eq(noOfClass) selector
Check examples here
OR You can also use :not selector .tab-pane:not(#home)
You can also try this (this is just like regular expressions)
.tab-pane:not([id^='home'])
{/*your code*/}
If you want to not include the id's which start with letter "h" then try the below one:
.tab-pane:not([id^='h'])
{/*your code*/}
Is there a way to select a DOM's only_child, n-th-child, etc? I know that there are selectors like some_tag:only-child, .some_class:only-child, #some_id:only-child, but that selects based on the tag or attributes (class, id, etc.) of itself. What I want is to do selection based on the tag or attribute of the parent.
For example, I might want to select the only-child of .some_class, which is the div with id B below, not the only-child that is .some_class, which is A.
<div>
<div class="some_class" id="A">
<div id="B">
</div>
</div>
</div>
If you're looking for the only child of .some_class, you need to separate the class selector and the pseudo-class with a combinator. Parent-child and ancestor-descendant relationships between two different sets of selectors are always indicated with a combinator (the child combinator and descendant combinator respectively).
Given your HTML, you'll want to use the child combinator > to limit it to the only element that's directly nested within .some_class:
.some_class > :only-child
If you are selecting an element then you can use attribute and nth-child selectors on either the parent or the element itself:
section div:nth-child(1) { /*
any div that is a first child under the section
*/ }
.some_class > :nth-child(5) { /*
any element that is the fifth immediate child of .some_class
*/ }
section[title] > :nth-child(5) { /*
any element that is the fifth immediate child of a section tag
where the section tag has a title attribute
*/ }
You can select the child of a certain type of element by listing it after the parent type with a child selector (>). For example, you could find the nth child (any type) of an element with some class by using .someclass > *:nth-child(N), which will look in all .someclass elements and find any element that is the nth-child(N).
It is important to note that you should use the child selector (>) rather than the descendant selector (simply a blank space) to ensure that it doesn't select the nth child of every child element (and their children, and theirs, etc.).
Note that older versions of IE and some other browsers do not support such selectors.
Check out the W3 on attribute selectors.
E.g.
div[lang=nl] span {
color: red;
}
This will make all span tags inside a <div lang='nl' /> color red.
I've made a fiddle here to see it in action.