I'm having an CSS problem, i need to achieve this
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:67px;
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-36px;
content:'';
}
article div#comments-wrapper ul.sub-comment:nth-child(1):before {
height:37px;
margin-top:-6px;
}
but i can't put two pseudo elements like that, and i've tested it (doesn't work),
also tried some other ways but didn't manage to figure it out.
:nth-child() doesn't filter by classes or anything. In your code, your first ul.sub-comment isn't the very first child in #comments-wrapper, so it doesn't work.
Instead, use this selector technique and invert your height and margin-top styles as follows:
article div#comments-wrapper ul.sub-comment:before {
width:1px;
height:37px; /* was 67px in your code */
background-color:#e4e4e4;
position:absolute;
margin-left:-595px;
margin-top:-6px; /* was -36px in your code */
content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
height:67px; /* was 37px in your code */
margin-top:-36px; /* was -6px in your code */
}
Basically, instead of :nth-child(1) (or :first-child for that matter), use a sibling selector with another ul.sub-comment to apply the original styles to all subsequent ul.sub-comment elements after the first one.
Updated fiddle (also inverted the background-color styles so the first one remains blue)
Related
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
I appear to have found a flaw with CSS3 transitions. Hopefully not though. Here is the dilemma.
.element a span {
display:none;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
display:inline;
opacity:0.8;
position:absolute;
top:10px;
}
The transition does not work like this at all. If one removes the display:none attribute then it does work, however we need in this case the display:none attribute on our link so that it cannot be interfaced with before hover.
Any ideas?
Marvellous
you could try put overflow: hidden on the a, that way the span should appear invisible, without the need to use display: none; as you have moved it 10px up.
or instead of display:none; try use visibility:hidden;
Changing display:none to display:inline makes the other properties moot as far as transitions are concerned. So separate the display:none/display:block change from the class change, using setTimeout. The browser needs to see them as separate changes in order to apply your transition. Sadly I think this means you can't just use :hover but will need a JS event handler on hover.
Specifically, I would use an inline style attribute of style="display:none" that you add or remove with JS, and take display:none out of the stylesheet.
Then, in JS, after removing display:none (explicitly or via the :hover pseudoclass's style rule), use a setTimeout function that explicitly adds/removes the class. That way the "this is display:inline" change is a discrete, earlier paint-able action from the other style property changes that you want the transition rules applied to.
In the opposite direction, change the class back in an event handler, and use a setTimeout function to set display:none as an inline style. The timeout will need to match the transition duration of course (so that display:none happens after the transition is complete).
or you can try using width or height 0 combined with overflow hidden on the invisible element so it doesn't disturb any of the other elements whilst preserving the transitions.
ie.
.element a span {
overflow: hidden;
height: 0;
width: 0;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
overflow: visible;
height: ???px;
width: ???px;
opacity:0.8;
position:absolute;
top:10px;
}
I would go with JS. CSS transitions suck with heights.
Here is what I used to make a click expand function, you could change a few things and do the same on a hover
// Dropdown
$(function(){
// Target the ul sibling to keep it generic
var selector = $('.dropdown article > ul').siblings().addClass('selector');
selector.click(function(){
var targetUl = $(this).siblings('ul');
if (targetUl.hasClass('open')) {
targetUl.removeClass('open').slideUp();
} else {
targetUl.slideDown().addClass('open');
}
});
});