Practical CSS3 Selector Examples with a Quiz Form Implementation
CSS Atribute Selectors with Regex Patterns
CSS3 introduces powerful attribute selectors that support substring matching using different operators:
[attr^="value"]- matches elements whose attribute value starts with "value"[attr$="value"]- matches elements whose attribute value ends with "value"[attr*="value"]- matches elements whose attribute value contains "value" anywhere
The attribute begins-with selector proves particularly useful for targeting elements sharing a common prefix in their class names:
[class^='question-content'] {
font-style: italic;
display: block;
}
This pattern matches any element with a class starting with question-content, such as question-content-container, question-content-select, or question-content-1.
Form Structure Example
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Selector Demonstration</title>
<style>
body {
width: 100%;
height: 100%;
}
.intro-text {
border: none;
width: 100%;
display: block;
overflow: hidden;
height: 60px;
}
.intro-text:focus {
outline: none;
}
.option-item {
display: block;
}
.option-item span {
display: inline-block;
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<fieldset>
<legend>Instructions</legend>
<textarea class="intro-text" readonly>
Complete all sections of this assessment.
Read each question carefully before answering.
</textarea>
<span>Question One</span>
<span>Question Two</span>
<span>Question Three</span>
<span>Question Four</span>
</fieldset>
<fieldset>
<legend>Multiple Choice</legend>
<div class="question-group-wrapper">
<div class="question-card">
<span class="prompt">1. Select all correct answers:</span>
<ul class="option-list">
<li class="option-item">a. First option</li>
<li class="option-item">b. Second option</li>
<li class="option-item">c. Third option</li>
<li class="option-item">d. Fourth option</li>
<li class="option-item">e. Fifth option</li>
<li class="option-item">f. Sixth option</li>
</ul>
</div>
<div class="question-card">
<span class="prompt">2. Select all that apply:</span>
<ul class="option-list">
<li class="option-item">a. Alpha</li>
<li class="option-item">b. Beta</li>
<li class="option-item">c. Gamma</li>
<li class="option-item">d. Delta</li>
<li class="option-item">e. Epsilon</li>
<li class="option-item">f. Zeta</li>
</ul>
</div>
</div>
</fieldset>
<fieldset>
<legend>Fill in the Blanks</legend>
<span class="question-content">3. First blank question</span>
<span class="question-content">4. Second blank question</span>
<span class="question-content">5. Third blank question</span>
<span class="question-content">6. Fourth blank question</span>
<span class="question-content">7. Fifth blank question</span>
</fieldset>
<div class="button-wrapper">
<span class="btn btn-primary" onclick="submitForm()">Submit</span>
</div>
<div class="floating-tooltip" id="tooltip"></div>
</body>
</html>
Common Stylesheet
.btn {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
background-repeat: no-repeat;
background-color: orange;
text-align: center;
}
.btn:hover {
background-color: purple;
}
.btn-primary {
background-image: url("button-icon.png");
}
fieldset {
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
}
.floating-tooltip {
position: fixed;
min-width: 150px;
max-width: 300px;
height: 40px;
background: yellow;
color: red;
visibility: hidden;
}
.floating-tooltip.active {
position: fixed;
min-width: 150px;
max-width: 300px;
font-size: 14px;
min-height: 20px;
max-height: 60px;
background: black;
color: #38d920;
visibility: visible;
opacity: 0.7;
border: 2px solid;
overflow: hidden;
}
Component-Specific Styles
.prompt {
font-weight: bold;
color: red;
}
.question-group-wrapper {
display: flex;
}
.question-card {
flex: 1;
border-right: 1px solid gray;
}
.question-card:last-child {
border-right: none;
}
.input-field {
width: 200px;
height: 30px;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid blue;
margin-left: 5px;
font-style: normal;
color: green;
}
.input-field:focus {
outline: none;
}
Pseudo-Class Usage
The :hover pseudo-class enables interactive feedback without JavaScript:
.btn:hover {
background-color: purple;
}
The :focus pseudo-class removes the default outline when users interact with form elements:
.intro-text:focus,
.input-field:focus {
outline: none;
}
Text Overflow Handling
For single-line text truncation with an ellipsis:
.option-item span {
display: inline-block;
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
This requires the parent to have overflow: hidden set, and the element must have a fixed width.
Dynamic Tooltip Implementation
document.addEventListener("DOMContentLoaded", function() {
enhanceQuestions();
initializeTooltips();
});
function enhanceQuestions() {
document.querySelectorAll("li.option-item").forEach(function(item) {
const originalContent = item.innerHTML;
item.innerHTML = "<span>" + originalContent + "</span><input type='checkbox' class='answer-checkbox'>";
});
document.querySelectorAll("span.question-content").forEach(function(element) {
const originalContent = element.innerHTML;
element.innerHTML = "<span>" + originalContent + "</span><input type='text' class='answer-textbox'>";
});
}
function initializeTooltips() {
document.querySelectorAll("li.option-item span").forEach(function(target) {
target.addEventListener("mouseenter", displayTooltip);
target.addEventListener("mouseleave", hideTooltip);
});
}
function displayTooltip(element) {
const tooltip = document.getElementById("tooltip");
const rect = element.target.getBoundingClientRect();
tooltip.textContent = element.target.textContent;
tooltip.className = "floating-tooltip active";
tooltip.style.top = (rect.bottom + 10) + "px";
tooltip.style.left = (rect.left + 50) + "px";
}
function hideTooltip() {
const tooltip = document.getElementById("tooltip");
tooltip.className = "floating-tooltip";
}
Key Takeaways
Attribute selectors with substring matching provide flxeible targeting for grouped elements. The ^= operator matches prefixes, making it ideal for class-based compoennt styling.
Pseudo-classes like :hover and :focus handle common interactive patterns natively, reducing the need for JavaScript event handlers.
Text overflow properties create clean truncation effects when combined with fixed dimensions and the nowrap white-space value.
Tooltips rely on position: fixed for viewport-relative positioning, with visibility toggled through class changes or direct style manipulation.
