Is it possible to combine multiple css selectors in a single expression ?
For example I would like to match the nodes that have the parent class visit and children class Home and attribute name align, value left.
.visit > .Home works as expected but when I add the attribute filter [align="left"] it fails to return any result.
I've tried something as below but its not working. I'm new to CSS so any guidance would be helpful. I assume/expect there is a AND(&&) operator equivalent which would pipe the result from the child combinator into the attribute selector but I can't find any.
.visit > .Home [align="left"]
Your selector...
.visit > .Home [align="left"]
... is saying, select all elements with an attribute/value pair align="left", that are descendants of elements with the class Home, that are children of elements with the class visit.
Remove the space between .Home and [align="left"].
Then the selector will read: select all elements with the class Home AND an attribute/value pair align="left", that are children of elements with the class visit.
Related
I have this css-selector
.buttons:last-child::not(a.hide)
<div class="buttons">
1
3
3
</div>
I want to select the last child which has not a class of ".hide".
But it does not work. What is wrong?
Lots is wrong:
not only accepts simple selectors, so either an element or a class. For your example, not(.hide) should do the job.
not(.hide) is not a pseudo-element, it is a pseudo-class. As such it should be preceded by a single colon, not a double one
.button:last-child does not select the last child of .buttons, it selects any element of class .buttons that is the last child of its parent. To select the last a in buttons use .buttons>a:last-child
Combining pseudo-selectors requires candidates to match them all. So :last-child:not(.hide) will select elements that are both a last child and not of class hide. Of which you have none. Change the class name in the css or the html and you will match the final element.
In fact I'm not sure you can achieve what you want with pure css.
In my HTML, I have 2 lines that have the same class. I want to be able to target just the first element, but can't seem to figure it out. I am able to target both elements, but when I change the CSS to select the first child, it doesn't return anything.
Here is the CSS and the duplicate classes
If I use svg g.highcharts-axis-labels, it will select both elements.
I tried selecting the first child like below, but its not returning any elements with that CSS.
svg g.highcharts-axis-labels:nth-child(1)
Can someone point out the mistake I am making.
.highcharts-axis-labels follows the element with .highcharts-data-labels class. So you can write:
.highcharts-data-labels + .highcharts-axis-labels {}
To target the first one.
So, for your question why "its not returning any elements with that CSS".
According to the definition
The :nth-child(n) selector matches every element that is the nth
child, regardless of type, of its parent.
With this selector and your html,
svg g.highcharts-axis-labels:nth-child(1)
the parent is "svg", the child is to be a "g.highcharts-axis-labels" at position 1 (in the list of all children under "svg" tag).
But the child at position 1 is not a "g.highcharts-axis-labels". Therefore the result is "no element".
.highcharts-axis-labels:nth-of-type(1) should select the first element.
You want nth-of-type pseudo-class:
.highcharts-axis-labels:nth-of-type(2) {
}
http://www.w3schools.com/cssref/sel_nth-of-type.asp
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.
JSFiddle Link: http://jsfiddle.net/sNeR7
The border under the text "Of this I am absolutely certain; that to claim absolute certainty is a fool's enterprise." shouldn't be there, since I have added this style rule:
.bannerItem:last-of-type
{
border-bottom: none!important
}
inside #media(max-width: 40em)
{ ... }.
Any idea why this happens?
When using :last-of-type realize that it only searches for the last element of a certain type (p, div, etc) within a parent, not a class or ID value. Since all of the children within .bannerHolder are of the same type, using :last-of-type properly would've ended up selecting .bannerPager instead, since its the last child div of its parent.
If you want to style the last .bannerItem within .bannerHolderyou can use:
.bannerHolder div.bannerItem:nth-child(3) {border-bottom: none;}
http://jsfiddle.net/sNeR7/3/
You can also use the adjacent sibling combinator to support older versions of IE:
.bannerHolder .bannerItem + .bannerItem + .bannerItem {border-bottom: none;}
http://jsfiddle.net/sNeR7/2/
Note that :nth-child() also doesn't search for an elements class, it only cares about whether or not an element is a child of its parent. So adding the class above isn't actually necessary.
:last-of-type selects the last element of that specific type, not the last element with a certain class. So in fact your selector .bannerItem:last-of-type will select nothing.
div.bannerItem:last-of-type would select the last div element, not the last element with class .bannerItem.
Since your markup contains div after .bannerItem, your selector will not work as you expect it to.
Assuming that there could be any number of .bannerItems I don't think there is actually a way to do what you are trying to do with pure css selectors.
If there will always be three you could use:
.bannerItem:nth-child(3) {
border-bottom: none!important
}
Fiddle
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.