This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 7 years ago.
I have the following css:
.pageMenu .active::after {
content: '';
margin-top: -6px;
display: inline-block;
width: 0px;
height: 0px;
border-top: 14px solid white;
border-left: 14px solid transparent;
border-bottom: 14px solid white;
position: absolute;
right: 0;
}
I'd like to change the border-width of the top, left, and bottom border using jQuery. What selector to I use to access this element? I tried the following but it doesn't seem to be working.
$('.pageMenu .active:after').css(
{
'border-top-width': '22px',
'border-left-width': '22px',
'border-right-width': '22px'
}
)
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after specified.
CSS:
.pageMenu .active.changed:after {
/* this selector is more specific, so it takes precedence over the other :after */
border-top-width: 22px;
border-left-width: 22px;
border-right-width: 22px;
}
JS:
$('.pageMenu .active').toggleClass('changed');
UPDATE: while it's impossible to directly modify the :after content, there are ways to read and/or override it using JavaScript. See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques.
You can add style for :after a like html code.
For example:
var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
If you use jQuery built-in after() with empty value it will create a dynamic object that will match your :after CSS selector.
$('.active').after().click(function () {
alert('clickable!');
});
See the jQuery documentation.
Related
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
How to get pseudo element?
(5 answers)
Closed 1 year ago.
here is my code :
.back-div::after {
background: black;
content: "";
opacity: 100%;
position: absolute;
display: none;
width: 100%;
top: 0;
left: 0;
opacity: 70%;
height: 100%;
z-index: 100;
}
how to get or find backdiv::after ??
please give the simplest way because I don't know even one library
you can do something like this:
let color = window.getComputedStyle(
document.querySelector('.back-div'), ':after'
).getPropertyValue('color')
Here's how to get the properties of the pseudo selector and a quick demo on how to switch classes (the best way to 'affect' css rules with pseudo selectors)
let theStyle = window.getComputedStyle(document.querySelector('.exciting-text'), ':after')
console.log(theStyle.content)
console.log(theStyle.color)
setTimeout(function() {
document.querySelector('.exciting-text').classList.add('boring-text')
document.querySelector('.exciting-text').classList.remove('exciting-text')
}, 1500)
.exciting-text::after {
content: " <- EXCITING!";
color: green;
}
.boring-text::after {
content: " <- BORING";
color: red;
}
<p class="boring-text">Here is some plain old boring text.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>
I'm trying to make little progress indicators for a form that change depending on the page you are on. I thought the easiest way to do this would be to create the circle ID's, style them, and then just add a class list with one or two stylistic changes to show something different as a specific page was brought up.
When my function executes, the new class with the changes is being added -- the dom is proving that -- but, the style is not overtaking the original.
I've tried classList.Add, classList.toggle, className.add/Classname.toggle. Nothing seems to work.
Why might that be?
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>
Calculating CSS Specificity Value:
As we know, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.
For more info https://css-tricks.com/specifics-on-css-specificity/
So, more specificity use Class aswell as IDs.
!importent, also works but it note a good practice.
Hope this will help you..
Your id step2 will always override your class newClass.
Easiest solution is just to change .newClass { ... } to #step2.newClass { ... } in your CSS to make it more specific
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
#step2.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>
I'm trying to override the background color present in vaadin-combo-box-overlay element.
Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)
:host {
position: absolute;
#apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}
So I've tried something like:
:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}
Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.
Also I'm wondering why the background is not parameterized as the text color is:
#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Specifying a different value for --primary-text-color I'm able to change the text color..
Thanks.
you can do it with javascript like that.
ready: function() {
var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
}
OR
ready: function() {
var css = '#selector .item { background-color:red; }';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
}
Would like to have a working CSS selector, but i cant set breakpoints in CSS to find out the right selectors!
You should use dom-module for styling vaading parts see example below:
<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
<template>
<style>
[part~="content"] {
background-color: red;
}
</style>
</template>
</dom-module>
Read more here https://github.com/vaadin/vaadin-themable-mixin/wiki
Thanks Patrick !!
I wasn't thinking about to do try it this way.
Here's what I did, a hacky solution though.
ready : function(){
var combo = this.$$('#comboid');
combo.addEventListener('vaadin-dropdown-opened'', function() {
var overlay = Polymer.dom(this.root).querySelector('#overlay');
overlay.style.backgroundColor = primaryBackground;
});
},
I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.
This question already has answers here:
Affecting parent element of :focus'd element (pure CSS+HTML preferred) [duplicate]
(2 answers)
Closed 7 years ago.
When I focus the input text element, I want to change the background color of the submit button.
<input id="submit-element" type="submit">
<span><input id="text-element" type="text"></span>
However, based on the current setup of the elements, I believe the span blocks them from being sibling elements and being able to use the ~ selector.
So how can I accomplish this? Is JavaScript necessary?
With current DOM you're forced to use javascript. Below there is a jQuery solution.
$('input#text-element').focus(function() {
$('input#submit-element').css('color', 'red');
});
$('input#text-element').focusout(function() {
$('input#submit-element').css('color', 'black');
});
You have to use JavaScript since the DOM is restricted from CSS. Try the following, which uses the onblur and onfocus input parameters:
.button {
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
border-color: #aaa #444 #444 #aaa;
border-radius: 5px;
color: #000
}
New Element
<span><input id="text-element" type="text" onfocus="document.getElementById('submit-element').style.backgroundColor = 'red'" onblur="document.getElementById('submit-element').style.backgroundColor = 'inherit'"></span>
Try this..
HTML
<input id="submit-element" type="submit">
<input id="text-element" type="text">
Javascript
document.getElementById("text-element").addEventListener("focus", changeSubmitF);
function changeSubmitF(){
document.getElementById("submit-element").style.backgroundColor = "#f4f4f4";
}
document.getElementById("text-element").addEventListener("blur", changeSubmitB);
function changeSubmitB(){
document.getElementById("submit-element").style.backgroundColor = "transparent";
}
Check out this Fiddle
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.