The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Which CSS selector?
RainLover
post Mar 28 2014, 11:46 PM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



Sometimes I find it difficult to choose the right CSS selector. Consider this, for example:

CODE
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Which CSS selector</title>
    <style>
        [for="married"] {
            outline: 1px solid red;
        }
    </style>
</head>

<body>
    <form>
        <label for="name">Name</label>
        <input type="text" id="name">
        <label for="married">Married</label>
        <input type="checkbox" id="married">
    </form>
</body>

</html>


I can get the same result with:
  • label:nth-child(3)
  • label:nth-of-type(2)
  • #name + label
  • etc.

I can even give the element an ID and get it directly. But isn't it better to keep your HTML tidier/smaller?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 29 2014, 07:20 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,826
Joined: 10-August 06
Member No.: 7



Some selectors are better supported than others.

Also you may need to consider if the CSS rule matches more than one HTML element --what if there are more forms on the same page, or the same stylesheet is used for other pages?

QUOTE
I can even give the element an ID and get it directly. But isn't it better to keep your HTML tidier/smaller?

If an element already has an ID for other reasons, the CSS rule should become more robust by taking advantage of it. In your HTML example FOR and ID are needed even without CSS, since LABEL and INPUT are separate, but if INPUT was inside LABEL:

CODE
<label>Married <input type="checkbox"></label>

you'd have to decide if adding an ID (to LABEL in this case) just for the CSS would be worth it.

Also if the FOR/ID value says something about the HTML element, it will help you remember the purpose of the rule without having to add CSS comments as reminders for future editing. For example,

CODE
label[for="married"]

says a lot more than

CODE
label:nth-child(3)

(where you may have to count LABEL elements in the HTML document in order to remember which one the CSS rule is meant for). It also becomes shorter than adding a comment like this:

CODE
label:nth-child(3) /* applies to "Married" checkbox */


This post has been edited by Christian J: Mar 29 2014, 08:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mamahadija
post Apr 20 2014, 02:00 PM
Post #3





Group: Members
Posts: 3
Joined: 20-April 14
Member No.: 20,751



the simpler the better
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th July 2021 - 10:51 PM