pseudo-class

On every other browser the webpage looks fine except Firefox. Even Internet Explorer! The pseudo elements float all over the document or even aren't displayed after the first ones are. Is there any solution of this behaviour? CSS span[property="dc:date dc:created"]::before{ position: absolute; top: 60px; content: ''; display: block; background-color: #005691; width: 60px; height: 20px; } span[property="dc:date dc:created"]::after{ position: absolute; top: 60px; right: 0; width: 0px; height: 0px; border-top: 20px solid #01416F; border-right: 20px solid rgba(0, 0, 0, 0); content: ''; } http:/

I mean if I need, for example, selected text in a hovered link be red, could I use the following code in CSS style? .abc:hover:selection{color:red} and <a href="123" class="abc">4567890</a> Would that link, when I select part of it, become red colored when I hover it and is this correct syntax for such pseudo-classes combining? If you're talking about pseudo-classes, then yes, you can combine them in any order. Except in this case, ::selection is not a pseudo-class, it's a pseudo-element that's not part of CSS1 or CSS2, or any current spec for that matter. And this is where the term "pseudo

In css, how can I stop the :hover event being triggered in a parent element when a child event is hovered, so that it only gets triggered when the parent itself gets hovered? In this case my child element is actually positioned outside it's parent element with absolute positioning, so it's a bit weird when the parent changes when the child gets hovered. I made a JSFiddle to illustrate the problem. Here's a JSFiddle of the used solution to my example. Litek There is a pure css solution (even two in fact) but both come at a cost. You can add pointer-events:none; to your child element - but it

I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column. The pseudo class to hide first column is table#student tr td:first-child { display: none; } Please help me with pseudo class or any other trick to hide third and forth column. <table id="student"> <tr> <td>Role</td> <td>Merin</td> <td>Nakarmi</td> <td>30</td> <tr> <td>Role</td> <td>Tchelen</td> <td>Lilian</td> <td>22</td> </tr> <tr>

I am trying to hide the following element in an automatically generated HTML document: <p id="sitspagedesc" class="sitspagedesc"> </p> In some pages, the <p> tag will contain an inner value but in others it can contain only spaces as shown in the example. I need to find a way of hiding this so that it is hidden using CSS only, as changing the HTML is not an option. I have tried to hide it using .sitspagedesc:empty { display:none; } but this does not work, presumably on the account of the spaces the element contains. Does anyone have any good ideas? Thanks :) I don't think you can do it with

I've just learnt a bit jQuery, and am trying to use it for a simple color-changing effect. Let's say I have two <div >s, #foo and #bar. #foo has a lot of URLs, and has the following CSS defined: #foo a {color: blue; border-bottom: 1px dashed blue} #foo a:hover {color: black; border-bottom: 1px solid black} now I would like to change the color of the links (a:link) in #foo when the user clicks #bar, but keep the a:hover color untouched, so I write my function like this: //... $("#bar").click(function () { $("#foo a").css("color", "red"); }); //... The problem is, while this function does change