I want to give all my .uk-width-medium-1-3 a left border except the first one of each line.
Please check my site
Right now I have a border on all boxes but always only want to have one on the second and third of each line.
Thanks for some help
I added to the CSS:
:not(:first-child)
but that does not help...
It isn't the first child, the heading .uk-panel-title is. Use first of type instead. Like so:
.tm-bottom-b .uk-width-medium-1-3:not(:first-of-type) {
border-left: 1px solid rgba(0, 0, 0, 0.07);
}
You always have to be careful with first-child. It selects the first child, no matter what type or HTML it is (excepting :before and :after elements because they are not really physically present HTML structural elements). The :first-of-type pseudo class, however, selects the element in a set of children that is the first of its kind among those children, e.g. first p element, first div element and so on.
Basically you want no border for every first div.uk-width-medium-1-3, to achieve that using css you have to group your div by 3's and apply a border to all, then add a second rule that will remove all first div's left border.
an example would be
div.uk-panel div.uk-width-medium-1-3:nth-child(1){
border-left:none;
}
or
div.uk-panel div.uk-width-medium-1-3:not(:first-child){
border-left:none;
}
Related
I have 4 dynamic divs in a page starting with the same text (dropdown1, dropdown2, dropdown3, dropdown4). The number changes every time I refresh the page but string "dropown" remains the same.
I want to apply the rule to dropdown4(the number may change on next refresh but div will always be on 4th position in the page.) How do I do that?
I have been using the following code which hides all the divs
div[id^='dropdown']{
display: none;
}
Just want to hide 4th div, is it possible? Don't want to use JavaScript here, pure CSS.
Use the :nth-of-type() selector
div:nth-of-type(4) {
display:none;
}
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
this selector applies formatting to anything ending in what you want.
https://www.w3schools.com/cssref/sel_attr_end.asp
[class$="box4"] , which selects elements whose class names ends in box4.
If you add div to the area outside:
Div[class$="box4"] it selects any div matching the same case. Hope that helps.
I have an element which could contain one, two or three buttons.
When i have only one button, then there is no margin to the right
When i have two buttons, then the first button gets a right margin
And when i've three buttons, the first and the second button get a right margin
What i have tried:
The :only-child covers my needs for only one button.
The sibling selector works pretty good but is limited when it comes to three buttons
Would love to read your solutions for this :)
EDIT:
Here comes a screen-capture of the page:
It shows the three possibilities. The container could either contain one, two or three buttons. I have already figured out how to edit the space around two buttons but how do i manage this for three?
You can use the :last-child selector and have css that looks like this:
button {
margin-right: 10px;
}
button:last-child {
margin-right: 0px;
}
When you only have one button, it will be the last element, and therefore won't have any margin. Then for two and three buttons, the last one won't have margin.
The :last-child selector works for IE9 and above.
I tried to add dot after a table, by using table::after selector to create a dot element and center it with margin: 5px auto 5px auto;. It works, but it seems dot is added after the first table column, not after the table itself:
Why and how to fix it?
Live code http://cssdeck.com/labs/ew6g4ntf/0
This is a somewhat weird way of doing it, but going along your solution, it's probably because that's how tables work best, on a cell basis. So that's why the table::after also resembles a cell.
But, if you put this whole thing in a div, and you float it to left, and you do this ::after thing with the div instead of the table, it will work well.
Here's a preview
Is there a way to check(in CSS) if an element is breaking/new lining?
I can't know the width of the divs or the parent. I only want to know the first element after the break, so I can add special CSS to this element
Like this:
<div>
first
</div>
<div>
second
</div>
<div>
third
</div>
<div>
fourth
</div>
the css:
div {
float:left;
width:200px;
height:20px;
}
div:not(:first-child) {
padding-left:10px;
}
here i need a check if the element is on a new line so I can remove the padding :
div:first-after-break {
padding-left:0;
}
I think in this case, you could probably do this by using padding-right to separate your elements, instead of padding-left. That way, elements are not indented when they start on a new line. If padding-right causes problems at the end of the line, you could consider using the :last-child pseudo selector (more information about :last-child), and set padding-right: 0; there.
This doesn't discard the question, though. I can think of legitimate uses of the :first-after-break pseudo you describe. For example: a fully responsive layout using floating block-level elements. In such a case, one might want to know if an element is at the left of the window.
You could use the ::first-line pseudo element to get the first line of a div. If you want to apply style rules to lines that are not the first line, you could apply those styles to the whole element and then remove it from the first line. But if you want to specifically use the padding property, you could also set text-indent on the whole element (without any pseudo elements).
No, I don't think there's a way in CSS to do what you're asking.
A DIV automatically takes up the full width of it's parent unless a width is specified since it's a BLOCK level element so if no width is specified so your second DIV would be on a new line anyway.
Can somebody help me to set diferent styles to firstchild and lastchild?
I want to set the left side of first element with round corners and the right side of last element. Middle elements without round corners...
I have created a fiddle to show my code: http://jsfiddle.net/Mqay8/
div :first-child {
}
div :last-child {
}
The label you're trying to style is the second child, since it comes after the input tag. Here's a working version, with the label moved into first position.