How to change element.style?

Sparks

I've tried div#content_holder > div[style]:not([id]):first-child { display: none !important; }, I'm trying to add a border-left 5px #123456 to bbp-forum1736.

anagrammar

WTF is "bbp-forum1736"?

Are we supposed to read your mind?

How difficult is it to post a URL and screenshot?

Sparks

how the heck do i save this onto a style

anagrammar

Dude, I can appreciate that you're trying here, but this is not at all what I asked you to do.

The pic of devtools shows that #bbp-forum-1736 is the id for the element in question. id means it's unique, but most forums generate a unique id for every individual comment, so using its id will only add a border to that individual comment.

It's completely unclear what you're trying to accomplish. The code you provided:

div#content_holder > div[style]:not([id]):first-child { display: none !important; }

has nothing to do with your stated objective:

"I'm trying to add a border-left 5px #123456 to bbp-forum1736."

Your selector div#content_holder > div[style]:not([id]):first-child is pretty ridiculous, and the property { display: none !important; } isn't going to add a border to anything.

How difficult is it to post a URL and screenshot? Apparently more difficult than I anticipated. Not a pic of devtools, but a screenshot of the page you want to change, along with an actual link to that page, so we can take a look at it.

If I wanted to ask how to add borders to comments in this forum, I'd provide an example URL:

https://forum.userstyles.org/discussion/56454/how-to-change-element-style

with a screenshot showing what I want to change on that page:

Yokiaza

Sparks said:

I've tried div#content_holder > div[style]:not([id]):first-child { display: none !important; }, I'm trying to add a border-left 5px #123456 to bbp-forum1736.

I'm answering this post for people who come across this now or in the future. Many people don't really have a good grasp on CSS and HTML and they don't know how to look for what they need to find yet. All you need to do to change or overwrite an existing style is add !important. It seems like all you did was right-click the element and choose "Copy >" "Copy selector".

If you want to properly select an element, right-click what you want to edit and select "Inspect element". From there it'll open Developer Tools to (hopefully) the element you want to edit or at least its parent object. From there, hover over the element to make sure that it's correct. It will highlight the object on the web page that you're hovering over.

In the panel to your right will be many different elements. The element either will or will not have an element already applied to it. If you're editing the web page on a website builder or you otherwise own the website you're editing on and have access to the CSS then you can just delete the styles applied to it and write new ones, but if you're injecting new CSS with something like Stylish you will need to properly select its handle.

To select the exact handle you need to edit you can navigate to the panel to your right in Developer Tools after you've selected your element. Wherever the values (padding, color, background color, etc.) are there will be a handle above it. Hovering over it will highlight the element on the web page so make sure you check that it's highlighting what you want to change. You can then click on that handle and do Ctrl+C to copy its handle. I'm providing an example of this below. Copy that handle into your new Style that I'm guessing you're making with Stylus or Stylish, then add a space, click {, click Enter (for the sake of it all looking nice), and type the element you want and the values for it you want instead. Example down below.

Example:

div[style]:not([id]):first-child"> {
border-left: 5px!important 5px #HEX_VALUE_HERE
}


!important overwrites the current element. If there's no value for "border-left" or no "border-left" applied to the style to begin with, you can just not include the "!important". If the style value of "border-left" is "none !important" then it still counts, include "important" to overwrite it. You can also use "rgba(r, g, b, a)" or "rgb(r,g,b)" instead of a Hex value to set the color, the "a" in "rgba(r, g, b, a)" will allow you to change the opacity. A value of 0 is fully transparent, a value of 1 is fully solid, anything in between (0.#) is how you get a semi-transparent value.

You can apply that with a blurred overlay for some custom styling, say if you want to have a blurred overlay for a gallery photo, banner, or background image. You can also change the element's border for when you hover over it, when it's active (say a navigation pane you're on), or when you've already visited something by adding "a:active", "a:hover", or "a:visited" to the handle and adding new values. Add the line "transition: #.#s" to the default value to achieve a transition animation. Example down below.

Example:

div[style]:not([id]):first-child"> {
border-left: 5px!important 5px #FFFFFF;
transition: 0.5s
}
div[style]:not([id]):first-child"> a:hover {
border-left: 5px!important 5px #000000
}


You can also have the animation apply to the transition animation apply to multiple states (active, hover, visited) if you want by adding "a:active", "a:hover", and/or "a:visited" and separating each by a comma. Example down below.

Example:

div[style]:not([id]):first-child"> {
border-left: 5px!important 5px #FFFFFF;
transition: 0.5s
}
div[style]:not([id]):first-child"> a:active, a:hover, a:visited {
border-left: 5px!important 5px #000000
}


I hope this helps anyone who comes across this forum post. I'm having a problem uploading images, so I'm providing an Imgur link to the images. They will be listed in order.

https://imgur.com/a/VyiqJ76

EDIT: Formatting