I'm a bit confused about the use of the :last-child selector. I have different buttons with the mark-up like this:
<div class="people">
<a href="pd.html" title="Post-Doctorate's">
<div class="people-button">Post-Doctorate's</div>
</a>
<a href="staff.html" title="Staff">
<div class="people-button">Staff</div>
</a>
<a href="phdstudents.html" title="PhD Students">
<div class="people-button">PhD Students</div>
</a>
</div>
Now I want to give the last button a different margin-bottom so I tried to use this:
.people a:last-child .people-button {
margin-bottom: 5px;
}
But it seems this is not the correct selector. Any help or explanation on how to do this?
Your code is right and works (see fiddle), but only in supported browsers.
ie: last-child won't work below IE9.
To see compatibility table see:
http://www.quirksmode.org/css/selectors/
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
Another, issue is that it could be overridden by another CSS rule with major precedence. Use Developer Tool (F12) in your browser OR context menu (right-click the anchor) for inspect the element.
Generally, the browser will show in the right pane for this element, the computed CSS styles & all styles that were applied (and overriden).
You could rewrite your code. Take off the divs inside a, and set a as display: block to break line and work padding:
<a href="pd.html" title="Post-Doctorate's" class="people-button">
Post-Doctorate's
</a>
<a href="staff.html" title="Staff" class="people-button">
Staff
</a>
<a href="phdstudents.html" title="PhD Students" class="people-button">
PhD Students
</a>
CSS:
.people-button {
display: block;
}
.people a:last-child {
padding-bottom: 50px; /* if you want space inside anchor */
background-color: #0aa;
}
.people {
border: 1px solid #000;
padding-bottom: 20px; /* if you just want space at bottom of container */
}
http://jsfiddle.net/m7CNv/2/
Related
Is there a CSS pseudo class for elements with no text nodes like so:
div:nocontent {
display: none;
}
I know that there is the :empty pseudo-class but the thing I want should ignore tags...
For example:
<div>
<p></p>
</div>
Any solution for this?
EDIT:
For clarification it could be a syntax like this:
<div class="checker">
<div class="somemarkupcontainerthatcomesfromthesystemandcantberemoved"></div>
</div>
And hide the whole thing like this (this would be optimal):
.checker:nocontent {
display: none;
}
If you want to target your div, you need a parent selector, which does not (yet) exist, so to solve that a script is needed.
As suggested by Hitmands, check this post for a script sample.
When it comes to script, one have also the server side approach, where a replacement script could parse out empty tags before sending the result to the client.
If you want to target your p, if empty and is a child of your div, you can do like this.
div {
border: 2px solid red;
min-height: 20px;
}
p {
border: 2px solid blue;
height: 20px;
}
div:not(:empty) p:empty {
display: none;
}
<div>
<p></p>
</div>
<br />
<div>
<p>Hey</p>
</div>
Yes, empty check if the node is empty (so with no text and no child nodes).
There are no CSS-only options for your purpose.
I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.
The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.
For example, if we have this HTML document:
<div class="container">
<div class="square">
<div class="square">
</div>
<div class="container">
<div class="circle">
<div class="circle">
</div>
To select just the .container divs, the following CSS can be used:
.container
{
/*Styling*/
}
To select just the .square inside the .containers then use:
.container .square
{
/*Styling for squares*/
}
To select all the elements that are inside the .containers then use:
.container *
{
/*Styling for squares, circles, rectangles and everything else you can think off*/
}
For further information, see the W3C reference on the Universal Selector:
http://www.w3.org/TR/selectors/#universal-selector
And also the Mozilla Dev Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
When star(*) is placed after the a class name it will select all its children.
From MDN:
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.
What's the simplest markup to display text upon clicking an image?
No toggling, CSS or Javascript. I have a series of thumbs that I would like put a caption to when clicked. I've been searching for hours for what seems to be so simple and I just don't get it.
The following approach is rather simple, but it makes the image caption text visible only until something else is clicked on in the page so that a link is followed. (It’s not quite clear from the question whether this is OK.)
Make the image caption text initially invisible, using CSS. Make the image a link to its caption, and use the :target pseudo-class to turn the caption to visible when the link is clicked on. Demo: jsfiddle.
<style>
a img { border: none; }
.caption { visibility: hidden; }
.caption:target { visibility: visible; }
</style>
<a href=#capt1><img src=test1.png alt=foo></a>
<div class=caption id=capt1>Image caption text</div>
<a href=#capt2><img src=test2.png alt=foo></a>
<div class=caption id=capt2>Image caption text 2</div>
As a side effect, the page may move down a bit, due to clicking on a link. If this is a problem, you could use “self-pointing” links instead:
<a href=#capt1 id=capt1><img src=test1.png alt=foo><br>
<span class=caption>Image caption text</span></a>
and then you would modify the selector in the essential CSS rule:
:target .caption { visibility: visible; }
This works across browsers except IE 8 and older. They can be covered using polyfill, i.e. JavaScript code that emulates support to the pseudo-element in browsers without native support. See Polyfill for css :target, not(), and [tilde] sibling selectors?
this will work
<label for="toggle">
<img src="your image path" />
</label>
<input type="checkbox" id="toggle" />
<span>your text here</span>
for the CSS
#toggle{
position: absolute;
top: -9999px;
left: -9999px;
}
span{
display: none;
}
#toggle:checked + span{
display: block;
}
img{
cursor: pointer;
}
But by doing this, against semantic rule of HTML.
Here the result.
Use a jQuery on() for each of the images, then use those click events to .toggleClass('visible') on the captions.
You might be able to get it to work with something like:
<img src="myimage.png" tabindex="1" /><div class="caption">Some text!</div>
CSS:
img~.caption{display:none}
img:active~.caption{display:block}
However, this is hacky at best. Something like this should really be done in JavaScript.
Is there a way? Yes! Is there a cross-browser way? No!
If you're not worried about it being cross browser or valid HTML, then this could work:
http://jsfiddle.net/charlescarver/XRBCF/
HTML:
<input hidden/>
CSS:
input{
-webkit-appearance:none;
-o-apperance:none;
-moz-appearance:none;
-ms-appearance:none;
padding:0;
border:0;
background-image:url(http://placedog.com/400/300);
height:300px;
width:400px;
display:block;
cursor:default;
}
input:focus{
outline: none;
}
input:focus:after{
content:"TEST";
background-color:red;
height:30px;
width:100%;
display:block;
position:relative;
top:270px;
}
I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn't want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?
The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn't work. So, I must be doing something wrong with the HTML? But I'm just not sure what. Help appreciated! Thanks.
Note: I have the CSS in an external sheet.
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :
<style type="text/css">
.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
</style>
<div id="topBrowse">
Browse
</div>
EDIT :
If you're looking to define a base class for the link itself, and a HOVER state, do it like this :
<style type="text/css">
.topTextHover {
background-color: transparent;
color: #0000ff;
}
.topTextHover:hover {
background-color: #555555;
color: #ffffff;
}
</style>
<div id="topBrowse">
Browse
</div>
Good luck
You applied style to the ":hover text" but not for links. This should do the trick (not tested):
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover, div.topTextHover:hover a {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
Anchor tags have a default text colour which gets priority (usually blue). What you need is to define this explicitly:
div.topIconsHover:hover {
background-color: #555555;
}
div.topTextHover:hover {
background-color: #555555;
}
div.topTextHover:hover a {
color: #ffffff
}
There are two really simple ways to resolve this issue.
First if you don't have any height/width requirements on the anchor tag (<a href=''></a>) being inside the div do the following:
.topTextHover a:hover{
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
If you do have spacial requirements for the text inside the div (i.e. you want the text to be vertically-aligned to the center and horizontally centered) then I would do the following note* this is backwards compatible but is really only compliant with CSS3
#BrowseLink:hover {
background-color:#555555;
color:#ffffff
}
<a id="BrowseLink" href="browse.html">
<div id="topBrowse" class="topTextHover">
Browse
</div>
</a>
Also of note IE6 doesn't like the pseudo-class hover on anything other than an anchor tag and therefor will not work properly. This may be applicable in other browsers as well but the main one that I know that has issues is IE6 of the browsers that are typically seen on a website.
I want to style the :active state of a button that is represented by an <a> tag. The <a> tag has an inner <span> (beacuse I want to add an icon to this button).
I notice the :active state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <span> (the <a>’s padding) triggers the :active state, but when clicking directly on the text within the <span>, the :active state is not triggered.
Is there a way to fix this without resorting to Javascript?
HTML
<a class="button" href="#">
<span>Add a link</span>
</a>
CSS
a.button { some styles }
a.button:active { some other styles }
Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/
HTML
<a class="button" href="#">
<span></span>Link
</a>
CSS
<style type="text/css">
a.button {
position: relative;
padding: 10px;
color: #c00;
}
a.button:active {
color: #009;
font-weight: bold;
}
a.button span {
position: absolute;
top: 50%;
left: 3px;
margin-top: -2px;
border: solid 2px #000;
}
</style>
Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.
Tricky: IE 8 doesn’t seem to register the <a> tag as active when the <span> is clicked. (IE 6 and 7 are both fine. You found a regression!)
It does, however, register the <span> tag as active. If you can apply all the styles you want to change for the :active state to the <span>, then IE 8 will play along, e.g.
a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
color: #009;
font-weight: bold;
}
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/
Any styles that only apply to the link won’t change in IE 8 though. In the example above, the text changes colour when clicked, but the underline does not, as the underline style is attached only to the link (via the browser’s default styles), not the <span>.
I had the same issue, and FINALLY figured it out:
You need a target in the <a> tag, i.e. add the "href" attribute in the <a> tag:
<a id="logonButton" class="button submit" href="#Url.Action("Index", "Home")"><span>Log On</span></a>
Works like a charm in all IE versions. :)
Maybe:
a.button span { ...
a.button span:hover { ...
would work?
Alternatively, you could put the <span> outside the <a> instead. That seems to work.
HTML
<span><a class="button" href="#">
Add a link
</a></span>
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/2/
Had exactly same problem today.
Try setting
z-index: -1; position: relative;
on the span.
This is what i came up with after reading this post.
I actualle wrote a long answer, with example code etc etc etc.. but while indent'ing css code, IE had a choke and crashed..
I came up with a solution that fixes the ie8 bug using jquery. Its an unreasonable use of resources for such a minor bug, but the app I was working on a the time was using a lot of jQuery already so it didn't matter.
HTML
<span>Button</span>
CSS
a.btn:active,
a.btn.ie8:hover { /* <-ie8 hack */
/* mouse down state a.btn style */
}
a.btn:active span,
a.btn.ie8:hover span { /* <-ie8 hack */
/* mouse down state a.btn span style */
}
Jquery
$(document).ready(function() {
var isIE8 = ($.browser.msie == true && $.browser.version == "8.0") ? true : false;
if (isIE8 === true) {
$("a.btn").bind({
mousedown: function() {
$(this).addClass('ie8');
},
mouseleave: function() {
$(this).removeClass('ie8');
}
});
}
});
You can fix it using this:
$('.yourspan').mousedown(function(){
$(this).parents('.youranchor:first').css("background-position","bottom");
});
$('.yourspan').mouseup(function(){
$(this).parents('.youranchor:first').css("background-position","top");
});