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.
Related
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.
I want to add a z-index value to a div that I don't have access to and has no id or class, plus there are more than one layers above all in the same way. The difference between these layers is that, the 3rd one (the one i'm interested in) has a z-index value attached (hard coded, not available from template files, i can't touch anything but the template files).
So what I want is to find a way to change the z-index value of this div.
For example the code looks like this:
<div>
<div>
<div style="z-index:2">
..some content..
</div>
</div>
</div>
Can I wrap this code in another layer, this time with a class name or ID and then try to make the change to the div inside? Is this possible?
Thank you very much!
Since the z-index is hard-coded, you can use an attribute selector to select the element (JSFiddle):
div[style*="z-index:2"]
This even works when you change the CSS through jQuery using .css(), or through JavaScript using .style.cssText, because the selector selects elements by its attribute, not by its property.
If you don't care about cross-browser compatibilities you can use the :nth-child() pseudoclass in your css selector.
Something like
(parent div) div:nth-child(3)
TL; DR: I'm looking for a way to display a SPAN element that can achieve the desired behavior showed in the 1st and 3rd pictures below.
Interactive Code: http://jsfiddle.net/53GZe/1/
When selecting text from a block of text, the display needs to be inline, so that no breaks are generated.
Now when I try to select multiple elements with the same display: inline: I get this:
Because the display is set to inline, it doesn't know how wide to make the <span> (the element inserted around the selection to give the custom highlight effect)
So, for the other case, when I set display to table-cell, I get this behavior:
Which is wonderful, and kind of neat. Except for that it doesn't work with an inline block of text like in my first example:
(notice the breaks before and after the selection)
Could you use jQuery to search the children of the highlighted div. Then if there are any blocked elements or line breaks, set the display property to table-cell.
Or by setting a new CSS rule for the situation, maybe again, by using jQuery to check for the inner elements?
.situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }
I realize this is a a pretty basic question, and perhaps I'm taking advantage of you all while I should be sifting through some dense css books/materials. But I can't figure out why my code doesn't work.
I'm trying to create two divs on a page, one below the other and it seems like I should be able to give the lower and absolute position which is below the top div.
I've got to div box whose css layouts are all the same but they don't look anything like eachother. Why is it that the second one looks completely unlike the first, why can't I make a "copy" of the first and place it below the first?
Heres the code. the top is the desired scroller is the desired effect. http://jsfiddle.net/7YueC/
Take out the IDs on the divs and/or add the class .same and then switch the #lasteventimg styles to .same. Remove the #2 styles.
Fiddle: http://jsfiddle.net/7YueC/7/
You don't have to use absolute positioning to position one div below another.
Check out this, a jsFiddle I did to demonstrate how to get one div below another.
since you are trying to achieve the exact same effect on both divs and all the contained elements - why not define a class that is applied to each div. div is a block level element, so they will stack on top of one another by default - no absolute positioning needed.
Here is your code, with the addition of the class eventimg and slightly modified CSS http://jsfiddle.net/ZXGUt/
Like mentioned prior if you are duplicating the same effect on two divs, change the styling to a class and use it on both. Secondly an ID cannot start with a number, otherwise the styling will not take affect. Change it to secondEventImage or similar. If you are programming websites, I would suggest using Firefox and plugin Firebug. It allows you to check if the styling is being applied and make quick edits to view how things will be prior to making changes in the code.
CODE - Example
div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
div#two ul {list-style: none;height: 100%;width: 8000px;}
div#two ul li{float:left;}
div#two img {width: 200px;float: left;}
OR
div.sameDivs {..........}
div.sameDivs ul {..........}
div.sameDivs ul li {..........}
div.sameDivs img {..........}
<div id="lasteventimg" class="sameDivs"> ....... </div>