Software Engineering › Key terms › Y12 Programming for the Web › CSS selectors (id v class)
CSS selectors (id v class)
Code pattern Y12 Programming for the Web
Definition
A class selector (.name) styles many elements; an id selector (#name) styles one unique element.
Example
.button { color: white } styles every element with class button.Found in: syllabus, course specifications, 2025 HSC marking guidelines, sample exam and familiarisation guidelines, school notes, past SDD papers.
Where it is used in the test
Syllabus area: Y12 Programming for the Web.
Question types it can appear in
- Code reading: 2025 Q7 and sample Q16a: read a CSS fragment
- Multiple choice: Pick the option that matches the definition or example.
Where it has appeared in the paper
Programming for the Web (Part A, B). Part letters follow each paper’s own layout.
Related past questions
- 2025 HSC Q7 (1 mark): CSS code fragment Programming for the Web (Part A) · 1 mark
- Sample exam Q16a (1 mark): CSS (id v class) Programming for the Web (Part B) · 1 mark
These are the questions the flashcard set links to this term. Open each one and compare your answer with its marking criteria.
Study links
- Flashcard: CSS selectors (id v class) in Programming for the Web (Year 12) · study that set
- Memorise: Web development system: front end, back end, databases
How to use it in an answer
A model sentence
Code pattern: “A class selector (.name) styles many elements; an id selector (#name) styles one unique element.” Then apply it: .button { color: white } styles every element with class button.
In a short answer, give the definition in your own words first, then tie it to the situation in the question. Do not copy the example above unless it fits the scenario.
Command words used with it
- Identify: Recognise and name. (2025 HSC Q7 (1 mark): CSS code fragment, Sample exam Q16a (1 mark): CSS (id v class))
Technique for the question types
- Multiple choice: Read all four options, rule out wrong ones, pick one; no penalty for guessing so never leave blank.
What the marking guidelines and feedback say
FLAG: the NESA MG prints the answer as 'The id "se_item" ...' while the question printout says "qe_item". This is an official inconsistency; the option is the 'id ... not correctly referenced' one. Fix: use class="qe_item" in the HTML or #qe_item in the CSS.
Worked answers from the marking guidelines
Sample exam Q16a (1 mark): CSS (id v class) (1 mark): criteria and sample answer
Criteria
1: Identifies the correct answer.
Sample answer
The id qe_item has not been correctly referenced. (The HTML uses id="qe_item" but the CSS selector is .qe_item, which targets a CLASS. An id selector is #qe_item.)
Common mistakes
- Use the term exactly as the syllabus words it, then link it to the scenario in the question; the 2025 feedback repeatedly rewards using the stimulus.
- Answer the command word: outline gives main points only, explain gives a reason or cause, discuss gives both sides.
Related terms
Same group in the syllabus: W3C and WAI · Client-side (front-end) programming · Server-side (back-end) programming · SQL and non-SQL databases · Web browser and developer (dev) tools · Cascading style sheets (CSS) · CSS maintenance tools · Code libraries and frameworks (front end) · Open-source software · Version control · Load times · Minification · Lazy loading · Caching