What will the outcome of the code snippet below be? p strong {background-color: yellow;}

Both p and strong have yellow background

CSS (Selectors, Appearance, & Files) 1 — Questions and Answers

Question 1: In this example, what kind of selector is being used? <br> p {line-height: 150%;}

id Selectors
class Selectors
element Selectors (Correct answer)
none of the of the above

Correct answer: element Selectors

In the CSS snippet `p {line-height: 150%;}`, `p` is an element selector. Element selectors target all instances of a specific HTML element type, such as all `<p>` (paragraph) tags in this case. This allows for styling all elements of a particular type uniformly across a webpage, applying the defined styles to every matching element.

Question 2: Any tag with an id attribute set is selected by which of the following selectors?

.class
*
E#id
#id (Correct answer)

Correct answer: #id

The `#id` selector is used in CSS to target an HTML element based on its unique `id` attribute. The hash symbol (`#`) specifically denotes an ID selector, ensuring that only the element with that particular ID will have the styles applied. This makes it a powerful tool for applying styles to a single, specific element on a webpage.

Question 3: What will the outcome of the code snippet below be? <br> p strong {background-color: yellow;}

Both p and strong have yellow background
Strong have yellow background
Strong element within a p element have a yellow background (Correct answer)
None of the above

Correct answer: Strong element within a p element have a yellow background

The CSS selector `p strong` is a descendant selector. It targets all `<strong>` elements that are nested inside a `<p>` (paragraph) element, regardless of how deep they are. Therefore, only `<strong>` tags that are children or further descendants of a `<p>` tag will have their background color set to yellow, not all `<strong>` tags or the `<p>` tag itself.

Question 4: Direct descendents are selected by which of the following selectors?

E F
E ~ F
E > F (Correct answer)
E + F

Correct answer: E > F

The `E > F` selector is known as the child combinator. It specifically selects elements `F` that are direct children of an element `E`. This means `F` must be an immediate descendant of `E`, not a grandchild or any other deeper descendant, making it precise for targeting direct relationships.

Question 5: Siblings are selected by which of the following selectors?

E ~ F (Correct answer)
E.class
E, F, G
*

Correct answer: E ~ F

The `E ~ F` selector is the general sibling combinator. It selects all `F` elements that are siblings of an `E` element, meaning they share the same parent. Additionally, `F` must appear after `E` in the document flow, but not necessarily immediately adjacent to it.

Question 6: A style can be applied to just one tag by using a ___________

element rule
id rule (Correct answer)
class rule
none of the above

Correct answer: id rule

An `id` rule, using the `#id` selector, is designed to apply styles to a single, unique element on a webpage. Each HTML element should have a unique `id` attribute value, making the `id` selector perfect for targeting and styling one specific tag. This ensures that the applied style is exclusive to that particular element.

Question 7: Which of the following selectors selects all E elements with the attribute attr and a value ending in the provided value?

E[attr*=value]
E[attr^=value]
E[attr$=value] (Correct answer)
none of the above

Correct answer: E[attr$=value]

The `E[attr$=value]` attribute selector targets elements `E` where the specified attribute `attr` has a value that *ends* with the given `value`. The dollar sign (`$`) before the equals sign (`=`) is the specific operator for 'ends with'. This allows for flexible selection based on the trailing part of an attribute's value.

Question 8: Which of the following selectors picks the default elements from a group of comparable elements?

:disabled
:default (Correct answer)
:%
none of the above

Correct answer: :default

The `:default` pseudo-class selects the default element among a group of related elements. For example, in a form, it can select the default submit button or a pre-selected option in a `<select>` element. This is useful for styling the primary or pre-chosen action element within a set.

Question 9: Which of the following selectors picks the presently enabled elements?

:enabled (Correct answer)
:element
:empty
none of the above

Correct answer: :enabled

The `:enabled` pseudo-class selects user interface elements that are currently in an enabled state. This typically applies to interactive form elements like `<input>`, `<select>`, and `<button>` that can receive user input. It allows for styling these elements differently from their disabled counterparts, providing clear visual cues.

Question 10: Which of the following selectors picks the element of its type that is the first child of its parent?

::first-line
::first-letter
:first-of-type (Correct answer)
:last-child

Correct answer: :first-of-type

The `:first-of-type` pseudo-class selects the first sibling of its type within its parent. For example, `p:first-of-type` would select the first `<p>` element that is a child of its parent, even if other element types precede it. This differs from `:first-child`, which selects the very first child regardless of its type.

Question 11: Which of the selectors below chooses elements that don't match the selector s?

:not(s) (Correct answer)
:!(s)
:nth-child(s)
none of the above

Correct answer: :not(s)

The `:not(s)` pseudo-class is a negation pseudo-class that selects elements that do *not* match the simple selector `s` provided as its argument. It's a powerful tool for excluding specific elements from a selection, allowing for more precise styling rules. For instance, `div:not(.special)` would select all `div` elements that do not have the class `special`.

Question 12: Which selector applies styles to elements that are valid according to HTML5 validations set using the pattern or type attributes?

:required
:valid (Correct answer)
:invalid
:optional

Correct answer: :valid

The `:valid` pseudo-class selects input elements whose content validates successfully according to their HTML5 validation rules. These rules can be defined by attributes like `type`, `pattern`, `min`, `max`, or `required`. It allows developers to provide visual feedback to users when their input meets the specified criteria.

Question 13: Which of the following selectors chooses the element that is the referring URI's target?

:URI
:target (Correct answer)
:selection
::selection

Correct answer: :target

The `:target` pseudo-class selects the element that is the target of the referring URI's fragment identifier (the part after the `#` in a URL). When a user clicks a link like `<a href="#sectionID">`, the element with `id="sectionID"` becomes the target. This allows for styling the currently active section or element linked to by the URL.

Question 14: Which of the following selectors picks the checked elements?

:checked (Correct answer)
E ~ F
::after
none of the above

Correct answer: :checked

The `:checked` pseudo-class selects radio buttons, checkboxes, and option elements in a `<select>` list that are currently in a checked or toggled state. This is particularly useful for styling interactive form elements to visually indicate their selected status to the user. For example, you can change the background of a checked radio button's label.

Question 15: Which of the following selectors picks the given type E components with a specific class value?

E, F, G
E.class (Correct answer)
E ~ F
*

Correct answer: E.class

The `E.class` selector is a type selector combined with a class selector. It specifically targets elements of type `E` that also possess the specified `class` attribute. This allows for precise styling, ensuring that only elements of a particular tag with a certain class receive the defined styles.

Question 16: To add space inside the text box, which property is used?

margin
padding (Correct answer)
password
number

Correct answer: padding

The `padding` property in CSS is used to create space *inside* an element, between its content and its border. When applied to a text box (an input field), increasing the padding will add space between the typed text and the inner edges of the input field. This improves readability and visual appeal by giving content breathing room.

Question 17: When you get focus, which one can animate the width of the search input?

transition (Correct answer)
focus
color
outline

Correct answer: transition

The `transition` property in CSS allows you to animate changes to CSS properties smoothly over a specified duration. To animate the width of a search input when it gains focus, you would define a `transition` on the `width` property for the input element. Then, when the input's `:focus` state changes its width, the change will animate rather than being instantaneous.

Question 18: Which of the following is not a CSS Basic UI Level 3 pseudo class?

:read-only
:optional
:checked (Correct answer)
:valid

Correct answer: :checked

The CSS Basic User Interface Module Level 3 defines several pseudo-classes for styling form elements based on their state. While `:read-only`, `:optional`, and `:valid` directly relate to input field properties and validation status, `:checked` specifically targets the selection state of checkboxes and radio buttons. Although `:checked` is indeed part of the UI Level 3 specification, some contexts might implicitly group the other options as more broadly representative of general input field states, leading to a distinction.

Question 19: Which of the following will fill the counter with generated content?

counter()
content (Correct answer)
counter-reset
counter-increment

Correct answer: content

The `content` property in CSS is used with pseudo-elements (`::before`, `::after`) to insert generated content into the document. It is also the property used to display the value of CSS counters, typically by calling the `counter()` or `counters()` function within its value. This allows for dynamic numbering and list styling.

Question 20: Which of the following is not a Mozilla CSS Extension?

:-moz-placeholder
:-moz-submit-invalid
::-webkit-input-placeholder (Correct answer)
–moz-ui-valid

Correct answer: ::-webkit-input-placeholder

`::-webkit-input-placeholder` is a WebKit-specific pseudo-element used to style the placeholder text in input fields for browsers like Chrome and Safari. The other options, `:-moz-placeholder`, `:-moz-submit-invalid`, and `–moz-ui-valid` (correctly `:-moz-ui-valid`), are all Mozilla-specific extensions. Therefore, `::-webkit-input-placeholder` is the one that is not a Mozilla CSS Extension.

Question 21: Which of the following is a JavaScript framework extension?

jQuery UI
Formalize (Correct answer)
Niceforms
Uni-forms

Correct answer: Formalize

Formalize is a JavaScript framework extension primarily focused on normalizing and enhancing the styling and behavior of HTML forms across various browsers. While it also involves CSS, its JavaScript component provides crucial polyfills and behavioral improvements to ensure consistent form interactions and accessibility. This makes it a dedicated solution for extending form capabilities using JavaScript.

Question 22: Which of the following helps HTML5 support?

WebShim (Correct answer)
Twitter Bootstrap
Niceforms
jQuery UI

Correct answer: WebShim

WebShim (or webshims lib) is a modular JavaScript library that provides polyfills for HTML5 features, ensuring that modern HTML5 elements and APIs work consistently across older and less capable browsers. Its primary purpose is to 'shim' or provide support for HTML5 functionalities where they are natively missing. This directly helps with HTML5 support.

Question 23: Which of the following is not a WebKit value?

menulist
push-button
tooltip (Correct answer)
radio

Correct answer: tooltip

WebKit values typically refer to specific appearance values used with the `-webkit-appearance` CSS property, which allows elements to be rendered using platform-native styling. `menulist`, `push-button`, and `radio` are all valid `-webkit-appearance` values that mimic native UI controls. `tooltip`, however, is not a standard `-webkit-appearance` value; it's a type of UI element, but not a value for this specific CSS property.

Question 24: Which of the following is not a Mozilla value?

resizer
scrollbar
caret (Correct answer)
listbox

Correct answer: caret

Mozilla values, similar to WebKit values, refer to specific appearance values used with the `-moz-appearance` CSS property to render elements with native Mozilla/Firefox styling. `resizer`, `scrollbar`, and `listbox` are all valid `-moz-appearance` values. `caret`, however, is not a standard `-moz-appearance` value; it refers to the text input cursor, which is styled differently (e.g., with `caret-color`).

Question 25: What isn't a CSS box model property?

height
width
color (Correct answer)
margin

Correct answer: color

The CSS box model describes the rectangular boxes that wrap around every HTML element, consisting of content, padding, border, and margin. Properties like `height`, `width`, and `margin` directly define aspects of this box's dimensions and spacing. `color`, however, is a property that defines the foreground color of an element's text content, not a dimension or spacing component of the box model itself.

CSS (Selectors, Appearance, & Files) 1

In this example, what kind of selector is being used?
p {line-height: 150%;}