im trying to add some custom styles to title attribute in scss, i found a resource which show how to do this in css, basically it nest one pseudo element inside another,
[data-title]:hover::before {
content: attr(data-title);
}
how can i convert this nesting in to scss?
below is the link which i refer, it use css, i want it on scss,
https://codepen.io/shimdim/pen/NjyNNb
You coould try it like this:
Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.
&:after:hover {} would select the after pseudo-element and used on hover it.
Related
I have a div.container that has lots of p elements inside it. Few of them has class p.special. I need to select p.special elements, but ONLY if they are NOT at the very top of the parent element (not first child element of parent .container).
P.S. I know this can be done easily with jQuery, but I'd prefere plain CSS solution for this.
Here I made explaining sample picture to make myself clear:
Using the :not and :first-child selectors should do it.
.special:not(:first-child) {}
I'm trying to make a link clickable inside of an list element. The list elements are styled with an :after pseudo element, because of hiding the last characters inside the link.
Here is my jsfiddle
I need pure css solutions. I can make it work using JavaScript.
Thanks
I have no idea why you are using an :after pseudo like that or what you are trying to accomplish there.
But anyways, inorder to fix it and make the links clickable, you need to use pointer-events: none; on your :after pseudo and that should work for you.
Update your stylesheet like :
ul li:after {
content:'';
pointer-events: none; /* Add this */
/* Other properties */
}
Demo
This is happening not due to overflow:hidden; but due to the fact that your :after pseudo element is overlaying all other content 'blocking' the links.
As such, simply add pointer-events:none; to the :after pseudo so it doesnt register mouse events, which instead are 'passed through' to the links below
Updated Fiddle
More on pointer-events from MDN
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events.
In addition to indicating that the element is not the target of mouse
events, the value none instructs the mouse event to go "through" the
element and target whatever is "underneath" that element instead.
With that in mind- depending on required browser support- pointer events may not suffice.
I have a text input that is wrapped inside a div. I want to change a css attribute of the :after of the parent div when the input is focused. How can I do this in CSS?
<div class="dataInputTextContainer">
<input class="dataInputText" />
</div>
I tried this but it did not work:
.dataInputText:FOCUS ~ .dataInputTextContainer:after{
background-color: red;
}
Simply put, you cant
(sorry)
CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.
What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.
Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?
If you didn't apply style on :after of the parent but rather put a tag at the same level than the input, you could have used this syntax to apply style of the sibling tag.
I have a div that I want to be clickable, so I've wrapped an "a" tag around it, as it is valid HTML 5 and made the div a block level element.
Now, the problem I'm having is styling content inside that div, as everything displays as a link, and despite trying numerous methods I haven't found a good solution for custom styling everything inside the div.
A reduced test sample can be viewed here:
http://codepen.io/anon/pen/aencq
So, my question is basically, what's the best way of styling elements such as h2 and p that are inside a block level div, that is wrapped with an a:link.
All you need here is:
a { color:black; text-decoration:none; }
Sometimes you'll want to get more specific and then you can be like:
a h2 { color:red; }
Basically what is happening to you is that all elements under <a> tag are inheriting css properties of a hyperlink (underline, blue color, etc)
To counter this create an id or class on your tag and remove/override the default anchor properties.
For example to remove the underline you do:
text-decoration: none;
After that override Link-related pseudo-classes: :link, :visited, :hover and :active.
The best way is a matter of opinion. To me the best way would be to use the most succinct CSS as possible. Use only the specificity that you need. For example don't use a div h2 when a h2 is all that's needed. Also FYI you can do something like a.block { display:block; } and then you won't need the div in the markup.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 2 years ago.
I have baloon shape designed with CSS3.
JS Fiddle Example
It's have triangle made with
:after {
content: "";
}
I need to moving triangle left-right with modify left css param with Jquery.
I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?
Yes, we can put another div inside like
<div class="pop"><div class="arr"></div></div>
but it's ugly
There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.
CSS
#SomeElement:after {
content: attr(some-attribute-name);
}
HTML
<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>
JavaScript (to change pseudo content)
var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');
You insert the CSS styles dynamically in the head, and then modify that:
$("<style type='text/css' id='dynamic' />").appendTo("head");
$('.pop').click(function(e){
$("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});
Here is a demo
http://jsfiddle.net/HWnLd/
As per this related question, you can't select the pseudo element. So I'd suggest defining additional CSS classes, and adding classes to the balloon with jQuery. E.g. use a class like this:
.pop.right:after {
left: 80%;
}
and apply it like this:
$('div.pop').addClass('right');
Working jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/