So the it would be cool if I could set all block/inline elements to have this attibute.
Of course it can be set with .setAttribute(), but is it possible to do this with CSS?
contenteditable
is a HTML attribute, which means that it needs to be set with either HTML (<h2 contenteditable=true>This can be changed</h2>
) or with JavaScript (`el.setAttribute("contenteditable", true). This is why the code you have above isn't working, as you have attempted to declare it with CSS, which isn't valid.
If you are looking for a way to programatically add it to multiple elements at once, instead of having to type it out, you can select elements using document.querySelector()
which allows you to use a CSS-style selector (eg .content > #h2
) and returns an array of elements, which you can iterate over and set the attribute with JavaScript.
So answering your updated question, there is no CSS property for content editable. It is an HTML attribute, which can only be set from within the element's tag, or from JS, it isn't possible from CSS.
You could use document.querySelector
as mentioned above to select elements using a CSS selector, and call setAttribute
on each element, which is probably the best way to do what you are setting out for.