0

im new to using jQuery. how can I update the border and background color using jQuery? i think my problem here is the jQuery selector, but how to create this jQuery selector?

$('.cls-box .cls-ctrl-input:bubble ~ .cls-ctrl-label::before')
.css('border-color','unset !important')
.css('background-color', 'unset !important'); - not working :(

.cls-box .cls-ctrl-input:bubble ~ .cls-ctrl-label::before {
  border-color: #211dff;
  background-color: #211dff;
}

TIA

blackowl
  • 27
  • 4
  • 1
    try: $('.cls-box').css('border-color','#ff0000').css('background-color','#00ff00') – Chris Berlin Jul 15 '21 at 13:11
  • $('.cls-box .cls-ctrl-input:bubble ~ .cls-ctrl-label::before').css('border-color','#ff0000').css('background-color','#00ff00') – Chris Berlin Jul 15 '21 at 13:12
  • 1
    Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – CBroe Jul 15 '21 at 13:13
  • 1
    You can find the JQuery `.css()` documentation here: https://api.jquery.com/css/ – Ismail Vittal Jul 15 '21 at 13:13
  • @ChrisBerlin its not working. – blackowl Jul 15 '21 at 13:22
  • @CBroe i dont quite follow which ones but promising i think. but from my css, the :bubble and ~tilde is confusing, dont know how to use that in jQuery. – blackowl Jul 15 '21 at 13:22
  • i think my problem here is the selector composition. – blackowl Jul 15 '21 at 13:25
  • 1
    The tilde is the [general sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator), that should present no problem in jQuery at all. The `::before` pseudo element however _can not_ be accessed via JavaScript, as the mentioned duplicate explains. – CBroe Jul 15 '21 at 13:27
  • 1
    And in general, you should try and manipulate/set _inline_ styles as little as possible, and rather handle what _can_ be handled via your stylesheet, directly in there. If the colors you want to set here are not “dynamic” - then you should add a rule to your systelsheet that formats the target elements differently via an additional class, and then you just set that class via JS, not the styles themselves. – CBroe Jul 15 '21 at 13:27
  • @IsmailVittal yes thats the standard for setting the css but I cannot compose the right jQuery selector. – blackowl Jul 15 '21 at 13:28
  • @CBroe i think the toggle class is cls-ctrl-label, but how about the bubble? – blackowl Jul 15 '21 at 13:29
  • try to add/remove class and from CSS change the border and background color – Ismail Vittal Jul 15 '21 at 13:30
  • 1
    _“but how about the bubble?”_ – I have no idea what `:bubble` is supposed to be in the first place, I can’t find any documentation for that anywhere. It’s not part of the “well-known” pseudo classes listed in the MDN either, https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes – CBroe Jul 15 '21 at 13:43
  • @CBroe i traced the bubble from the js plugin, is just a boolean variable. – blackowl Jul 15 '21 at 13:47
  • 1
    But that doesn’t explain what `.cls-ctrl-input:bubble` is supposed to be. I don’t think the mere existence of a variable in a script somewhere, will make the browser understand unknown pseudo classes in a CSS selector … – CBroe Jul 15 '21 at 13:52
  • I was able to fix in jQuery not using css. Thanks to all who responded, i appreciate it. – blackowl Jul 15 '21 at 14:18

0 Answers0