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.
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 a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
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;
}
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.
I'm currently working on a navigation menu that has circles after each menu item, except for the last one. I'm using :after to create and position the circle. I'm trying to get the last list item with either :nth-child or :nth-of-type, but nothing seems to be targeting correctly. I can target the LI of the navigation item, but then I cannot target the a:after to hide the circle.
Here is a fiddle using :nth-of-type(4): http://jsfiddle.net/EgBhE/ - does nothing
as well as a fiddle using nth-last-child(1): http://jsfiddle.net/EgBhE/1/ - hides all circles
I'm not picky on using these 2 selectors; if there is one that I'm not using but it would work, please, let me know.
nav li:last-child a:after { display:none; }
That works. Basically you need to rethink it. You can't grab "last of" based on the anchor elements because they are all last (and first for that matter) children... of the <li>s. thus you need to base it on the last li.
Demo
Why not use the :last-child pseudo selector?
Updated your fiddle.