I have a grid of news articles and I wanting it so the last two articles in the grid do not have a bottom border, however my css last-child selector does not seem to be working, the last article with the class right has the border taken off, however the last article with the class left does not, is there a reason for this?
Here is a fiddle of my code and problem.
http://jsfiddle.net/Udders/HJE5h/
As mentioned by #BoltClock above, swap the broder-bottom for border-top and target the first-child instead. SOme older browsers do not support last-child:
JSFiddle: http://jsfiddle.net/HJE5h/2/
Edit
Ok, as #BoltClock mentions in the comment below, the problem is not entirely with the last-child issue. However, if you do use border-top as suggested above and then target the next select element that directly follows the first-child, you can remove border-top from the first two articles.
section:first-child .snippet, section:first-child + section .snippet {
background:none;
border-top:none;
}
JSFiddle: http://jsfiddle.net/HJE5h/5/
You can achieve that by using nth-last-child(n) pseudo class. It begins at the end of the collection and this way you can specify the last two elements without knowing the size of the collection. Please try this selector in your css code:
.grid_9:nth-last-child(1) .snippet, .grid_9:nth-last-child(2) .snippet {
background: none;
border-bottom: none;
}
This is a good reference for useful css selectors http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Related
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).
I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame
Here is a fiddle where I'd like to remove the white border:bottom on the last child ('Headline Three').
I tried the following CSS, but it didn't work.
#containerr dt.last-child {
border-bottom:none;
}
Any idea what I'm doing wrong?
What you were actually looking for was :last-child - however this isn't implemented in the way you would expect. :last-child means that the element must be the last child in the parent, even if the elements that follow are of different classes/types.
What you are actually looking for is the :last-of-type:
#containerr dl dt:last-of-type {
border-bottom:none;
}
JSFiddle
The only problem being that it isn't supported in IE before V9.
This doesn't answer you question, but provides a workaround the issue.
I tend not to use :last-child (since I use to develop for older browsers - well one older browser - IE). Also I find :last-child a bit awkward to work with.
:first-child is more widely supported (CSS 2) so I prefer using this.
What you do is instead of adding bottom border, you add top border - so the output would be border > content > border > content
Then you use :first-child to remove the top border from the first element, so you're left with content > border > content.
I've copied your fiddle over and made this with two changes:
First, replace bottom border with top border:
#containerr dt {
[...]
border-top:1px solid white;
}
Second, use the :first-child to remove the top border from the first dt:
#containerr dt:first-child {
border-top:none;
}
Here's a fiddle: http://jsfiddle.net/ninty9notout/et7TW/
Enjoy!
Pseudo selectors are prefixed with a colon (:). the . prefix denotes a class. Equally, :last-child targets the very last element within a collection. In your case, a dd element is the last child, so for this reason you should use :last-of-type. Change:
#containerr dt.last-child
To:
#containerr dt:last-of-type
Amended JSFiddle.
Check out the CSS Selectors specification for further detail.
#containerr dt:nth-last-child(2){
border-bottom:none;
}
Try that, it worked fine for me.
Can any body tell me how I use last-child selector to style my last div of subs?
This is my HTML -
<div class="main">
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="paginate"></div>
</div>
I tried it something like this in my CSS -
div.main div.subs:last-child {
border: none;
}
But its not working. If I remove paginate div, then it is working. So can I know how can I style last subs div without any extra id or class declaration.
Thank you.
Assuming there is only ever 1 element succeeding your .subs (.paginate), you can use this:
div.main div:nth-last-child(2) {
border:none;
}
See this JSFiddle
This can be seen as a little hacky, and if your paginate element is ever absent, then the wrong sub element will be targeted. Your only other option is to give the .subs their own container and then use :last-child:
Another JSFiddle
P.S: To understand why :last-child isn't working the way you want it to, I really recommend also reading Spudley's answer.
The problem you have is because of :last-child doesn't work the way you think it does.
The :last-child selector will select an element only if it is the last child of its parent.
In the case of your .main element, the last child inside it is the .pagination div. This means that .main>*:last-child can only select the pagination div. It doesn't matter if you filter it down by specifying .subs; you can't select anything else using :last-child because none of the other elements are the last child of .main. If the actual last child element isn't in the filtered selection, it will select nothing rather than selecting something that isn't the last child.
The best way to work around this is to wrap your subs elements inside an additional layer of markup, so that the last one then does become the last child of that container element. Either that, or move the pagination element outside of the main element; whatever works best for your layout.
The other selector you might have tried, :last-of-type works in a similar way. For the time being, there isn't a CSS selector you can use instead to pick the last .subs element, using your current markup. (unless you're happy to go with :nth-last-child(2) which will pick the second-last child, on the assumption that the pagination div will always be present).
In the new selectors being designed for CSS4, there is a set of 'match' selectors that would do exactly what you want to do. You would use :nth-last-match(1) to get the last matching element. This is the selector you need. Unfortunately, it isn't available in current browsers, and there's no real hint yet as to when (or even whether) it will be available in the future. For the time being, you can read about it here, but not use it. You might be able to use it or something similar via a JS library like jQuery.
Hope that helps explain things to you.
I would suggest that you add an extra class name to the last element. http://jsfiddle.net/5FQck/
div.main div {
border: #000 thin solid;
}
div.main div.subs.last {
border: none;
}
<div class="main">
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs last">subs</div>
<div class="paginate">pagination</div>
</div>
None of the following selectors work in IE 8 and below, primarily because they are all CSS3 selectors.
:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)
You could also add that new class to the last element using JQuery: http://jsfiddle.net/5FQck/1/
$('div.main div.subs:last').addClass('last');
If I understand you correctly, I would do it like this.
.main .subs:nth-child(4)
{
border:none;
}