CSS selectors Flashcards
How you decide which elements will get the style?
A selector is used to target the specific HTML element(s) to be styled by the declaration.
The type selector matches the type of the element in the HTML document.
The type selector selects all elements of a given type
How would you use a universal selector?
The universal selector uses the * character in the same place where you specified the type selector in a ruleset e.g.
* {
font-family: Verdana;
}
The universal selector selects all elements of any type.
When working with HTML and CSS a class attribute is one of the most common ways to select an element.
How do you select a class element using CSS?
<p>Sole Shoe Company</p>
by placing a . before the class
like so, .brand {
}
If an HTML element needs to be styled uniquely, we can give it an ID using the id attribute.
<h1> ... </h1>
An element’s id can only have a single value, and only be used once per page.
Can you add more than one class name to the class attribute? if so, how?
Yes, <p class='red bold'> . . .</p>
.red {
color: red; }
.bold {
font-weight: bold; }
How would you select an id’s element with CSS?
You would place a # before the id name e.g. #large-title {
}
The attribute selector can be used to target HTML elements that already contain attributes.
This alleviates the need to add new code, like the class or id attributes.
How would you select attributes with CSS?
[href]{
color: magenta;
}
The most basic syntax is an attribute surrounded by square brackets.
And it can get more granular from there by adding type and/or attribute values. One way is by using type[attribute*=value].
In short, this code selects an element where the attribute contains any instance of the specified value.
Notice how no new HTML markup (like a class or id) needed to be added, and we were still able to modify the styles of each image independently.
This is one advantage to using the attribute selector!
e.g.
<img></img>
<img></img>
img[src*=’winter’] {
height: 50px;
}
img[src*=’summer’] {
height: 100px;
}
How would you use a pseudo-class?
Give examples of pseudo-classes!
A pseudo-class can be attached to any selector.
It is always written as a colon : followed by a name. For example p:hover.
e.g. :focus, :visited, :disabled, and :active
While classes are meant to be used many times, an ID is meant to style only one element
While classes are meant to be used many times, an ID is meant to style only one element
Define specificity
Specificity is the order by which the browser decides which CSS styles will be displayed.
A best practice in CSS is to style elements while using the lowest degree of specificity so that if an element needs a new style, it is easy to override.
IDs are the most specific selector in CSS, followed by classes, and finally, type.
<h1>Breaking News</h1>
h1 {
color: red;
}
.headline {
color: firebrick;
}
The h1 color would be firebrick because the class selector is more specific than the type selector.
Chaining multiple selectors. . .
if there was a special class for <h1> elements, e.g. h1.special { }
The code above would select only the <h1> elements with a class of special.
If a <p> element also had a class of special, the rule in the example would not style the paragraph.
Descendant combinator
In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements, also known as descendants.
e.g. .facts li { }
.facts selects the element with the .facts class (the <ul> element). The descendant <li>‘s are selected by adding li to the selector, separated by a space. This results in .facts li as the final selector.
In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code.
e.g. h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
}
Instead of writing font-family: Georgia twice for two selectors, we can separate the selectors by a comma to apply the same style to both, like this:
h1,
.menu {
font-family: Georgia;
}
Make sure to add comma after all but the last selector!
