Does anyone know if it's possible to define a CSS selector that selects the first image within a div, but only if it's the first child within the div.
In jQuery I would use a comparison something like this...
if ($('#div img:first-child') == $('#div>*:first-child')) {
...
}
By definition of "first-child", the selector (assuming your div had an id of div)
#div img:first-child
already does that. First image of any div is
div img:first-child
However, as BoltClock's answer points out, the child selector is needed if you may have img elements nested deeper in the div.
You don't need to do a comparison in jQuery if all you want to do is select that img. Just combine your two selectors like so:
#div > img:first-child
This works in both jQuery and CSS.
It's a simple CSS selector:
#div:first-child img:first-child
Related
I've got a div with class and id that is auto generated with each refresh for the site
like that
.mnc-row[data-row-id="mnc_row-3259bbbe82bc595"]
this number "3259bbbe82bc595" is auto generated from the wordpress plugin and there is no option to change the look of this div from the control panel so I need custom css.
can anyone help?
You can try out the following code
#sections div[id^='mnc_row-'] {
color: red;
}
see the Fiddle here
Hope that will work for you
Since the class and id are auto generated, if you have control on where the div is going to be generated, you can wrap it with another div.
Or look for a common pattern. If the div you are targeting has a parent and it is the only child div you can use
.parent-class > div {}
If there are many children for the parent and if you are sure about the order of the div use the nth-child() Selector
.parent-class div:nth-child(2n+1) {}
You can also use the first-child and last-child
.parent-class div:first-child {}
.parent-class div:last-child {}
The [att|=val] selector should do the trick for you. It matches an element where the att attribute is exactly val, or where the att attribute begins with val followed by a hyphen. So if selecting by the data-row-id attribute is okay, and it always starts with mnc_row-, the selector below should work.
[data-row-id|="mnc_row"] {
}
This selector was originally intended for language matching (think: matching en-US and en-GB with one selector).
I can use the following to select all divs that are not the first div among their siblings.
div:not(:nth-of-type(1))
Is there anyway I can select all div's that are not the first two?
You can use sequential :not pseudos, so: div:not(:nth-of-type(1)):not(:nth-of-type(2))
http://jsfiddle.net/akm4qnds/
OR
Even better, you can use sibilings selectors... Like div:condition ~ div that will select every sibiling divs that are after the one with the condition.
So: div:nth-of-type(2) ~ div will select every div that comes after the second child.
http://jsfiddle.net/akm4qnds/1/
You can use multiple :not to exclude multiple items
Example
div:not(:nth-child(1)):not(:nth-child(2)) {
background: blue;
}
DEMO
It can even be dome more clear, without specifically writing out the not pseudo selector per element.
U can do this the get the same results:
:not(:nth-of-type(-n+2)) {
}
:not(:nth-child(-n+2)) {
}
I know its a late answer:P but maybe still usefull to somebody
I have a style sheet that consists styles that affects two elements in my page, I can't change the classes for my elements, is there any way to make sure that the styles apply to only one specific element in my page not for the other.
Have you tried the first-of-type selector?
ex.
p:first-of-type {
background:#ff0000;
}
Yes. You can do that by specificity.
Select topmost parents and go on targeting their childs until you reach the last child element that you need to apply styles for.
If you can add an id to it or if any id is dynamically generated, just create a specificity for the same and you will get your thing done.
For Instance,
body div#your id name div.your_class1 > div.your_class_element_that_you_want_to_style{/* your values */}
Hope this helps.
PS: In the illustration, div is used as a reference and you can select the elements accordingly to your HTML structure.
If there are two, you use the :first-of-type selector:
div.selector:first-of-type {
/* styles here */
}
Is it possible to define css class behaves dependent to an other css class?
For example; when
a:hover
Then I want to set
p {background:#fff;}
Is this possible with pure css?
Edit: Assume that no nested relation exist.
If you mean you want all p to have that style when a:hover regardless of where they are in the DOM, then no, you can't do that. You'll need to use a script to apply the style (or some class containing that style) to the p elements when a receives a hover.
if you have a structure like this:
<a><p>...</p></a>
then this:
a:hover p {background: #fff;}
will work. However, block elements should not be placed inside inline elements (in this case, no <p> inside <a>
if your markup is valid, and looks like this:
<p><a>...</a></p>
then you could have
p:hover {background: #fff;}
but a descendant can't affect the parent css (unless you use javascript) while the opposite is true (parent css affects descendants)
I do not see why you would be limited to these restrictions with a littl creativity. if you use fixed positioning the descendant can overlap its parent. and still respond like a descendant.
If the <p> tag immediately follows the <a> tag then you could use the adjacent sibling selector e.g.
a:hover+p{
background:#fff;
}
This is supported in IE8+
What I want to do is something like:
#div_id > .some_class
{
}
I don't want to change the class everywhere. I only want to change the class if it in that particular div.
Is ther some other way to do that same thing?
You've already stumbled upon the answer yourself:
#div_id > .class {
/* CSS magic */
}
This selects .class if it is the direct descendant of #div_id. For all descendants regardless of depth, use the selector #div_id .class instead.
See also this JSFiddle.
Your question already contains the child combinator CSS selector and will target the elements with class .some_class that are children of the element with id div_id, so if you have only one <div> with an id of div_id then it will only target the child elements with the class some_class. So it should work as already expected, except in IE6 of course which does not support that selector natively.
If you want to select grandchildren, use the descendant combinator.
Child combinator body > p
Descendant combinator body p
You essentially have the answer there. If you want to modify all classes with in a div then the selector would be div#id .this_class. If it's just one instance of the class inside the div (say you have a div called 'test' with three divs with a class of 'test_class' then you could either use the :nth-child() selector or the :first-of-type selector.
Your code looks fine to me. Note that the > operator will only affect the children of the DIV not any lower decendants (i.e. grandchildren). Remove the > to affect everything inside the DIV with the class .some_class.