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
Related
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>
Is it still possible to add the align attribute to a HTML element to align the element itself? So that it's not set via CSS but in the element tag itself, something like this:
<div align="center"></div>
Will this still center it, or will the attribute just be ignored?
As Mike W pointed out in the comments:
The align attribute is deprecated in HTML 4, and removed in HTML 5.
Don't use it: use CSS instead.
That being said, here are some ways to center it anyway, even though you say you have more elements with that class.
Give this specific element inline style:
<div class="main" style="margin: auto;">
Be more specific in your CSS. The element is probably a child of an element that does not have any other .main babies, so you can specify this element by using the parent element in CSS:
.parent-class > .main {margin: auto;} /* If the parent has a class */
#parent-id > .main {margin: auto;} /* If the parent has an ID. This one is prefered, to avoid misunderstandings */
If the above is not the case, and there are multiple instances of .main within a single parent, you can use the nth-child selector (or first-child or last-child). For instance, if the element you want to center is the third child within the parent element, use this code.
.main:nth-child(3) {margin: auto;}
why dont you use
<div class="main" style="margin:0 auto;">
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;
}
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).
Looking through style sheets from popular & unpopular websites I have found the div selector included in them. The bottom four examples were taken from the style sheets of the popular sites Stack Overflow, Github, Youtube & Twitter:
div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}
.searchFooterBox div span.smallLabel{font-size:14px}
#readme.rst div.align-right{text-align:left;}
.hentry .actions>div.follow-actions{visibility:visible;text-align:left;}
I find that I can design fully functioning CSS style sheets with out using the div selector so the question is:
What is the div selector's function?
&
Why do so many developers use it?
EDIT:
To be clear, when using the div selector, what does it mean when div appears before an id or class?
For example:
div.foo { color:black; }
div#bar { color:gray; }
And what does it mean when div appears after an id or class?
For example:
.foo div { color:black; }
#bar div { color:gray; }
When the div selector appears after an id or class does it have to have another selector appear after it?
For example:
#foo div span { color:black; }
#foo div p { color:black; }
Being more explicit in your selector makes it easier to remember what the HTML structure is like. Months down the line I can read the CSS and based on my explicit rules I can automatically map the structure in my head without going back to the HTML.
By specifying the node name before the class or ID, the rule becomes more specific. If you want to override .foo { color:black; } for a div that has a class of foo, just do div.foo { color:red; }. Paragraphs that have a class of foo would be black, while divs would be red.
It can be useful if you want to serve different css rules based on HTML structure. In the rules below, Any span inside a div is red. Any direct span under #foo is blue.
CSS:
#foo div span { color:red; }
#foo span { color:blue; }
html for that:
<div id="foo"><span>blah</span> <div><span>blah</span></div> </div>
Live demo that you can play around with: http://jsfiddle.net/6dw2r/
EDIT:
div#foo matches a div with an id of foo.
div#foo div means any div descendants of #foo.
No. It doesn't.
Please read http://www.w3.org/TR/CSS2/selector.html#pattern-matching for further questions.
div.form-item-info{...} // all div elements that have class~=form-item-info
.form-item-info{...} // all elements that have class~=form-item-info
In HTML and XHTML, <div> and <span> are generic container elements. <div> is a block-level element. <span> is an inline element.
Most other elements (<h1>, <p>, <strong>, etc.) have specific semantic meanings. It's bad practice to use, say, a <p> element for something that's not a paragraph. But <div> is just a container.
If you need something to be purely decorative, or to group related elements, <div> is a good choice.
The tag defines a division or a
section in an HTML document.
The tag is often used to group
block-elements to format them with
styles.
http://www.w3schools.com/tags/tag_div.asp
They're just being explicit about their selectors, which tends to be a good thing, as you're being more specific when addressing the elements to be styled. (Smaller chance of conflicts and unintended styling.)
div.foo { rule }
div#bar { rule }
This means the rule only applies to div elements with class foo or id bar, and the rule would not apply to non-div elements with class foo or id bar.
.foo div { rule }
#bar div { rule }
This means the rule applies to all div elements inside any element with class foo or id bar. This is called a descendant selector.
#foo div span { rule }
#foo div p { rule }
When a div selector appears after an id or class, it is not required to have another selector after it. If there is such a selector, the rule will apply to the selected elements only if they are inside a div element which is inside an element having id foo.
You may want to read up on your selectors here:
http://www.w3.org/TR/CSS2/selector.html