#container * { }
Click the card to flip 👆
1 / 27
Terms in this set (27)
a[href^="http"] { }If we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above.a[href$=".jpg"] { }we're searching for all anchors which link to an image -- or at least a url that ends with .jpg:hoverthe state that happens when the user places their mouse pointer on top of a link.:activethe state that happens when the user clicks on a link. This is the very brief moment between clicking on the link and becoming focused, or the moment between clicking and then going to another web page. Because this state normally lasts for a short duration, you can see this state easier when you click-and-mouse-down on a link without releasing the mouse button.:focusthe state that occurs when the user focuses on the link. This state can be seen when you tab to a link, or after you click on a link.a[data-filetype="image"] { }added our own data-filetype attribute to each anchor that links to an image; then, with that hook in place, we can use a standard attributes selector to target only those anchors.a[data-info~="external"] { }The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.input[type=radio]:checked { }This pseudo class will only target a user interface element that has been checked - like a radio button, or checkbox. It's as simple as that..clearfix:after { }This hack uses the :after pseudo class to append a space after the element, and then clear it.div:not(#container) { }Let's say I want to select all divs, except for the one which has an id of container.p::first-line { }We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect.p::first-letter { }This snippet is an abstraction that will find all paragraphs on the page, and then sub-target only the first letter of that element.li:nth-child(3) { }We can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.li:nth-last-child(2) { }This technique works almost identically from number sixteen above, however, the difference is that it begins at the end of the collection, and works its way back.ul:nth-of-type(3) { }In the snippet above, only the third ul will be selected.ul:nth-last-of-type(3) { }we can also use nth-last-of-type to begin at the end of the selectors list, and work our way back to target the desired element.ul > li:last-child { }will target the last item of the element's parent.