I have a checkbox which has a label, in one of my css the width of this label is set to 10cm
In my form I have multiple labels however for one of my labels I want it to span the whole page rather than 10cm. I don't want to override if possible as that would ruin the look of the rest of my form as there are other labels etc in there.
How can I do this for the one checkbox label?
If the checkboxes are within the same parent, you can use nth-child or nth-of-type, alternatively you can target directly by id or using a good selector.
Demo Fiddle
Use the nth-child selector
The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element.
This can more clearly be described this way: the matching element is
the bth child of an element after all its children have been split
into groups of a elements each.
The values a and b must both be integers, and the index of an
element's first child is 1.
In other words, this class matches all children whose index fall in
the set { an + b; n = 0, 1, 2, ... }.
Among other things, this allows selectors to match every other row in
a table.
OR nth-of-type
The :nth-of-type CSS pseudo-class matches an element that has an+b-1
siblings with the same element name before it in the document tree,
for a given positive or zero value for n, and has a parent element.
See :nth-child for a more thorough description of the syntax of its
argument. This is a more flexible and useful pseudo selector if you
want to ensure you're selecting the same type of tag no matter where
it is inside the parent element, or what other different tags appear
before it.
Related
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.
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
Is it somehow possible to define certain look for DIV being empty, i.e having no accessors inside (no nested elements) without need of using JS, just using pure CSS?
Yes that's what the :empty pseudo-class is for.
From the MDN docs:
The :empty pseudo-class represents any element that has no children at
all. Only element nodes and text (including whitespace) are
considered. Comments or processing instructions do not affect whether
an element is considered empty or not.
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.