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)
Related
How can you change the css of a specific div even if a bunch of parent divs do not have ids? You can do
#someid>div>div>div>div>div
and I tried that, but it changes all the applicable divs at that level, not the one I want only. say there is ten divs that parent one div i want, and i use css like that to change the color. But there is another one of the same generation ( a sibling is it called) that also gets affected. imortant: there are no ids until that tenth one
first of all if you didn't share your code it's hard to find any solution. But Still if you're facing issue with CSS you can try inline CSS which will help you to achieve your goal. Inline CSS Like-
<div style="width:50%; text-align:center; justify-content:center;">Hello Josh</div>
In the above code style is inline CSS.
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 cannot work out what is going on here. The paragraphs with class="caption" on this page are not lining up and I cannot work out why. The page is here
The second image has a the class alignLeft applied to it, which the first does not. This class includes the CSS property float:left which removes the inline status of the image, and hence the extra pixels that browsers put under any inline element. This resuls in the height of the wrapping link tag to drop from 186px to 179px.
You should check the CSS "tag" selectors within your CSS files. As far as I can see there exists an overall margin-bottom value (a value of 1.625em which means a pretty long distance between paragraphs) which has been assigned for all p elements.
Is there a way, in CSS, to select a div inside another that contains a specific child like this:
I know it can be done using jQuery, but i'm looking for a way to do it ONLY using CSS.
This is not possible with plain CSS
You can only make rules where the selectors are parents, whereas your anchor is not a parent of .content.clearfix
This can be done using jQuery however. Heres an example:
http://jsfiddle.net/Curt/b95TB/
In my HTML there are a lot of elements. Some div elements have an table as child element. I want to set some css properties to all div element, but differs between those with table and those without it.
My first approach:
The class property of those div-elements containing a table is set to something with 'table', so I can select them with attribute selectors as described here: http://www.w3.org/TR/selectors/#attribute-selectors
div[class*="Table"]
{
/* Set Properties for all div with 'table' inside class-attribute */
}
Unfortunately there seems to be no opposite attribute selectors.
So my first question is: Is that right or what can I do?
My next approach is, to check if one child is a table. With help of google I only find how to select e.g. first-child of an element, but not how to check, if it is a table or not.
So my question 2 and 3 is: How do I select those div elements, containing (or not containing) a table as child?
Edit: Usually the table would be first-child, but if possible I would like to check all child elements being a table or not
There is no way to target parent elements with CSS (2.1 or 3). The best you can do, is manually add a class to all of the div tags you want to target, or use JavaScript to write your selection criteria.
If you were to use JavaScript to do this, you could easily do so with jQuery, like this:
$('div > :first-child').not('table').parent().addClass('notables');
Working demo
Edit for comment: If you want to select a div that doesn't have any tables nested, you can use the following, with the jQuery :has() selector:
$('div:not(:has(table))').addClass('notables');
Working demo 2
Your approach of adding a class to <div>s that contain a table is the only way to do this with CSS.
There is the :not() selector if that helps with this approach. It’s unsupported by IE 8 and below and Opera 9 and below, but all other browsers support it.
You can get the same effect by setting styles for <div>s that don’t contain tables with the div selector, then overriding those styles for <div>s with the table class, but :not() might make it less verbose. Demo here: http://jsfiddle.net/LyLS5/