0

So i understand the browser parses, tokenizes and builds the DOM and CSSOM trees. The DOM contains the parent-children relationships between HTML and text elements. The CSS tree contains style rules. In the image below im not even sure if its an accurate representation since the CSSOM there also contains information on the HTML elements. If the CSSOM contains a style rule tree(not sure how this is possible without knowledge of the HTML structure), does it contain classes and id's? (I have read confliction information between chatGPT and an article i read linked below) If it does contain classes and id's, is at some point the classes and id's resolved to the correct HTML element during the building of the render Tree?

Conflicting information is the absolute worst and biggest waste of time to humanity. Hopefully someone with experience on browsers can shed some light. THanks

https://danielleaver.com/2018/03/25/how-browsers-work/

enter image description here

Improve this question
6
  • CSS has selectors, and they can form a tree-like structure in CSSOM. It just happens to be an unlucky choice in the article that all selectors represent HTML elements.
    – KIKO Software
    Commented Mar 20 at 7:01
  • Why would you go anywhere near ChatGPT if you were looking for facts? It generates statistically likely word combinations, not facts.
    – Quentin
    Commented Mar 20 at 8:21
  • The CSSOM diagram is garbage. There is no linkage of elements anything like that depicted in the diagram in CSSOM,
    – Alohci
    Commented Mar 20 at 8:38
  • So a selector like "body span img" is represented with like a tree with arrows between them? And a single class of ".MyClass" would be represented by a single node in the CSSOM named MyClass rather than being represented by the HTML element it targets e.g <span class="MyClass"></span>
    – Pacific East
    Commented Mar 20 at 10:15
  • You could think of it that way. I rather think of them as individual selectors that the browser will try to match against the DOM tree. They are matched in the order you put them in your CSS file. Look for instance at the different combinators that exist. They make more sense when you think of selectors being matched against the DOM tree. How exactly a browser has implemented this, is really non of our business, and probably way too complicated to understand.
    – KIKO Software
    Commented Mar 20 at 11:55
Related questions
2705
How to make a div 100% height of the browser window
2363
Retrieve the position (X,Y) of an HTML element
2297
How can I select an element with multiple classes in jQuery?
Load 6 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.