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
Related
I need to apply a function to checkbox elements that are not part of a bootstrap-multiselect element. To do this I'm trying to make a css selector that fitlers out based on the parent they have. The syntax that I have so far is this:
$(this).find("input[type='checkbox']:not(ul.multiselect-container>input)")
Where the :not(ul.multiselect-container>input) is my attempt to specify to the css selector that I want all css elements except for the ones that are children of an unordered list that has the class multiselect-container.
From doing some investigation it seems that this should be possible, but my syntax doesn't seem to cut it. How can I make this work with the :not function? OR perhaps another way.
I'm using clearfix to prevent the Bootstrap grid from breaking when I use columns of different heights.
However, once the clearfix div is added to the document, the columns that appear after it in the source behave as if they have a different even/odd index than they actually do.
I have created a relevant demo. As you can see, removing the clearfix div, makes the colors of the divs change as if their index has changed.
Do you know what may be causing and what I can do to correct it?
If you look at the nth-of-type definition it specifies
The :nth-last-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element. See :nth-child() pseudo-class for the syntax of its argument.
The key thing here is that it states:
the same expanded element name
So taking that quite literally, the css selector targets a specific element and then the odd and even are matched on the specific element name and not the elements matched using the specific selector.
This is why replacing a divwith a span will work as it will never get matched as it is a different element.
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.
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.
i'm using wordpress and i have an element i want to style... it's called...
<h2 class="widgettitle">
now, i know i can do,
h2.wigettitle {
whatever:css;
}
however, the problem i have is that i have multiple widgets with the same title and it effects all of them.
but, this h2.widget title is within another div called "headerarea".
so, in my file it's like...
<div id=headerarea">
<h2 class="widgettitle">
whatever title
</h2>
</div>
so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?
i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.
hope this makes sense... thanks for any help guys.
Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.
You can use the child or descendant selectors to accomplish this. Child selector > #headerarea > h2.widgettitle select h2 elements with class widgettitle that is a child of element with id headerarea. Descendant selector a space #headerarea h2.widgettitle select h2 elements with class widgettitle that is a descendant of element with id headerarea.
Also see http://www.w3.org/TR/css3-selectors/#selectors
#headerarea .widgettitle {
/* Put your styles here */
}