-2

I have some questions on the capabilities of CSS 2 and CSS 3 selectors.

  1. Are CSS 2 selectors powerful enough to select any element in a DOM tree?

  2. Is there anything that CSS 3 selectors could do while CSS 2 selectors could not?

  3. Could any CSS 3 selector be theoretically converted to a CSS 2 selector (although the converted CSS 2 selector may be a bit tedious)?

  4. Is there any tool for converting CSS 3 to CSS 2 selectors?

I ask this question as I find that there is a good CSS 3 selector generator (e.g. superselector) but there are tools that know only CSS 2.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user1129812
  • 2,859
  • 8
  • 32
  • 45
  • Can you edit your HTML? As long as you can add class and id attributes to your elements, you can achieve the same results using "CSS 2 selectors", with a bit of extra work. – Mathias Mar 20 '14 at 07:02
  • But before I could add attributes to a chosen element, I must first select it through CSS 2 selector. I am not going to edit the HTML manually. – user1129812 Mar 20 '14 at 07:07
  • These questions don't make a lick of sense. – sevenseacat Mar 20 '14 at 07:23
  • @sevenseacat My scenario comes from some practical use cases. Normally, when using modern browser, I would certainly choose CSS 3 selector. However, there are times I use some tools that restricts me to use CSS 2 selector only. So I need to know the capabilities of CSS 2 to see whether we could use it to choose arbitrary elements in a webpage. – user1129812 Mar 20 '14 at 07:59
  • @sevenseacat My question 2 may be a bit not very meaningful. I believe that CSS 3 must be more capable than CSS 2 (otherwise why a new version !). However, the new version may be just to let us choose elements more conveniently, but not make a critical difference. Perhaps I have not said it in a very good way, but that's my point. – user1129812 Mar 20 '14 at 08:07

1 Answers1

5

  1. No, otherwise why would there be a level 3? Unless you're asking about something like the * selector, which does match any element in the document, and didn't exist prior to CSS2.

    If you're asking whether you can construct selectors to match elements for any sort of condition, again the answer is no. Pseudo-classes, for example, represent abstractions of the document tree that can't be expressed with other simple selectors, but CSS2 comes with a very limited selection of pseudo-classes that may be used, which certainly don't represent all possible conditions you may have in mind. Most of level 3 consists of new pseudo-classes to address precisely this, but again, they don't account for all possible scenarios.

  2. Yes. See above.

  3. Only some of them, but not all, again for obvious reasons.

    For example, div:nth-child(4) can be replicated using :first-child and the appropriate number of next-sibling selectors:

    :first-child + * + * + div

    See my answer to this question for details.

    However you cannot replicate any of the substring-matching attribute selectors introduced in Selectors 3 with the ones in CSS2. You also cannot replicate :nth-child() with formulas such as :nth-child(2n+1) using CSS2 selectors, nor can you completely replicate :nth-of-type() without making any assumptions about the DOM. Just to name a few examples.

  4. I cannot answer this, but someone might have tried making a converter and failed for the reason I've given above.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks for the good explanation. Perhaps I have not specified in a precise enough way. In question 1, I just want to use CSS 2 selector to select an arbitrary ONE element, not a combination of different elements. With you explained the `:nth-child()` selector, I think I could select most (if not all) of the elements (ONE element only) in a webpage with my CSS 2 restricted tool. – user1129812 Mar 20 '14 at 08:39