(Selectors, Appearance, & Files) Flashcards

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

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 `` (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.

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

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.

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

Answer: Strong element within a p element have a yellow background

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

Direct descendents are selected by which of the following selectors?

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.

Siblings are selected by which of the following selectors?

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.

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

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.

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

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.

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

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 `` element. This is useful for styling the primary or pre-chosen action element within a set.

Which of the following selectors picks the presently enabled elements?

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 ``, ``, and `` that can receive user input. It allows for styling these elements differently from their disabled counterparts, providing clear visual cues.

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

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 `` 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.

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

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`.

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

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.

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

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 ``, the element with `id="sectionID"` becomes the target. This allows for styling the currently active section or element linked to by the URL.

Which of the following selectors picks the checked elements?

Answer: :checked

The `:checked` pseudo-class selects radio buttons, checkboxes, and option elements in a `` 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.

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

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.

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

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.

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

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.

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

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.

Which of the following will fill the counter with generated content?

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.

Which of the following is not a Mozilla CSS Extension?

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.