I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}
Related
I'd like to select a img child of #boardMostra but not direct child of a tag a.
I tried this :
#boardMostra img :not(a img:first-child){
...
}
But it doesn't work.
The only css way you could use is to set a property on #boardMostra img and neutralize it on #boardMostra a > img.
An example
<div>
<img src="#" alt="#">
<img src="#" alt="#">
</div>
div img { margin: 10px 20px; }
div a > img { margin: 0; }
Explanation
Why your example code doesn't work:
The :not(X) property in CSS is a negation pseudo class and accepts a
simple selector1 as an argument. Essentially, just another selector of
any kind.
:not matches an element that is not represented by the argument. The
passed argument may not contain additonal selectors or any
pseudo-element selectors.
Source: https://css-tricks.com/almanac/selectors/n/not/
Solution:
#boardMostra > img , #boardMostra :not(a) > img { ... }
The first part refers to <img>s that are direct descendants of #boardMostra.
The second part refers to all <img>s in #boardMostra that are direct descendants of anything but <a>
See an example:
https://jsfiddle.net/t4snrgz6/
Why I think this is better than the accepted answer
There are times when you don't want to manually write out the CSS for the alternative set. For example, I am using a plugin that has a bunch of CSS for <code> elements that are direct descendants of <pre> elements. I want to style <code> elements that are NOT direct descendants of <pre> without messing with the plugin's CSS. My solution allows me to do that, using :not(pre) > code
On this page, I want to hide the incorrect HTML displayed above the logo. It is generated by an old plugin we are replacing soon.
To start with, I tried the CSS:
.vine-home-block-grapes:first-child {display: none;}
but this does not remove the highlighted block below:
Can you help me determine why please?
Use css :first-of-type selector
.vine-home-block-grapes:first-of-type{
display:none;
}
That selector won't work as the element you are attempting to select is not the :first-child of its parent.
One way to do what you want is select all elements with that class name, set their styles as you wish and then, using a new rule with the sibling selector, override those styles for any element of that class appearing later in the parent.
.vine-home-block-grapes{
display:none;
}
.vine-home-block-grapes~.vine-home-block-grapes{
display:block;
}
Add this script. It would work fine without any problem:
<script>
var fourthChild = document.body.getElementsByTagName("div")[0];
document.body.removeChild(fourthChild);
</script>
Thanks to #FelixKling
Try wrapping the child elements in a <div> so the element can BE the first child of its wrapping element. Right now, your element is not the first child of <body> See the experiment here to show how :first-child doesn't work as expected, because really it's not the first child of its parent.
p:first-child {
background-color: aqua;
}
.vino:first-child {
background-color: lightgreen;
}
WORKS
<p>First</p>
<p>Second</p>
<p>Third</p>
DOESN'T WORK (because none of these are the first child of its parent, in this case, <body>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
Adding a wrapping div works.
<div>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
</div>
If I want to style a div element only when there is a p sibling, I can write the following CSS rule:
p ~ div
Is there a CSS rule for styling an element when there isn't a matching sibling?
For example something like:
p !~ div
<section>
<p></p>
<div></div>
<div></div>
</section>
<section>
<div></div> <!-- Style this one -->
<div></div> <!-- Style this one -->
</section>
If :not() allowed combinators, you would be able to simply do div:not(p ~ div). But it doesn't, so you won't be able to use :not() in that manner.
The selector you need will depend on your structure. In your case, if not having the p causes the first div to be the first child of your section, you can use div:first-child to make sure you select your divs if and only if that condition is met:
div:first-child, div:first-child ~ div
If your structure does not allow such a selector to be constructed, then you will have to rely on an overriding rule as Danield suggests.
How about doing it the other way around:
Set a style for all the divs according to the way you want them when no <p> elements are there.
Then override that style when there is a <p> element.
section div
{
color: green;
}
section p ~ div
{
color: black;
}
FIDDLE
Just give id/class to div and write its corresponding CSS simple
Can somebody please explain what the selectors mean?
As far as I understand having #myId - is css for control with id=myId.
.myClass is Css for controls with class myClass.
Can somebody please explain the other combinations?
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
div.img a:hover img
selects images that are inside hovered links, that are inside div elements with class img, and gives them a blue border.
div.desc
selects divs with the class desc.
An id (#) can exist only once in a document. It is really useful to identify an element in CSS ans in JavaScript as well (should you ever need it).`
A class (.) can be used as often as it is required.
Example: you have only one header: <div id="header">Header</div>, but several articles: <div class="article">...</div>
Say you have this HTML document:
<div id="site">
<h1>Some heading...</h1>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
<div class="article">
<h1>Title</h1>
<p>Some content...</p>
</div>
</div>
The heading of the articles shouldn't be as big as the heading of the site, so we have to use a more specific selector: .article h1 {...}. This will style every <h1>element in a element of the class "article".
If we want to have an even more specific selector, we would use: div.article h1 {...}. This will only style every <h1> element in a <div> box with the class "article"
div.img a:hover img means: find me an img element which is a descendant of an a element that is currently being hovered over, which is in turn a descendant of a div element with a class name og img.
div.desc simply selects any div with a class name of desc.
Have a look at the standards definition, I always find this useful: CSS selectors at W3C.
div.img a:hover img
This will match any img tag that is within an a tag which is currently in a hover state that is within a div tag that has class="img".
div.desc
This will match any div tag with class="desc".
When items are chained like this with only spaces between them, it matches on that specific hierarchy of elements. For example, in the first one, an img tag that's not in an a tag won't be matched.
You can also delimit items with a comma, which instead of matching a hierarchy of items will match each item individually. So something like div.img, img will match any div tag with class="img" and will match any img tag.
Specifically for the :hover attribute, that's called a pseudo-class. It modifies the attribute to which it's attached (in this case an a) by looking for items of that type which are in a specific state (in this case, being hovered over).
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')