Geek Answers Handbook

Visualize CSS selectors such as: read-only in debug (F12 tools)

Having

:read-only, [readonly] {
    background-color: aliceblue;
}
<form>
    <h2>test</h2>
</form>
Run codeHide result

How can I detect, in case of debugging, for example, in Chrome, that the field h2(or form) has a property :read-only(or another type of selector, for example :disabled, etc.) before true?

PS.

To clarify the question: the question is not the CSS workaround for this particular case, but the way to define a specific element in devtools (F12 tools), if this element has or does not have some selectors, there :read-onlywas an example among others ...

+4
source share
2 answers

Chrome DevTools "" "". :

styles pane in elements tab - showing: read-only selector

, (:read-only ) , , ([readonly]), .

, , - DOM node, Element.matches(). DOM node $0.matches(':some-selector') ($0 ). .

calling $ 0.matches in the DevTools console

+2

, Chrome:

  • :read-only (<h2> <p> <html> )
  • [readonly] readonly (<p> )

, readonly [readonly] selector

form :read-only {
    background-color: aliceblue;
}
form [readonly] {
    border: 1px dashed #d00;
}
<form>
  <h2>test</h2>
  <input type="text" />
  <p readonly="readonly">test2</p>
</form>
Hide result
0

More articles:


All Articles