How to select based on the parent's attribute - html

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.

Related

How to select an element that doesn't have any descendants with specific class? [duplicate]

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.

Apply rule to element except if it has ancestor with specific class [duplicate]

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.

Select only children without any parent with a specific class [duplicate]

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.

Css Selector > only selects the child rather than parent

I want to apply background-color to a table cell which has an input[type=text]. Every cell in the table has a class .sapUiTableCell. I use this selector to select the cell, which has input[type=text]
td>.sapUiTableCell>input:not([type]){
background-color : yellow !important;
}
The background is only applied to the input field and not the entire cell !
http://jsbin.com/tezite/1/edit
A selector formed with > always selects a child, by its definition. This is why it is called child selector.
There is (currently) no parent selector in CSS, i.e. a selector that would select an element on the basis of what it has as children. See Is there a CSS parent selector?
The practical conclusion is that normally you should set class attributes on the cells to distinguish them, unless you can select them on the basis of where they are nested in, rather than their content.
What you're using is a direct child selector.
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.
Unfortunately there are no parent selectors in CSS as of now.

:hover with ">" in CSS

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...