CSS-Selectors

#container * { }
Click the card to flip 👆
1 / 27
Terms in this set (27)
#container * { }
This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.
li a { }
Descendant selector For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector.
a:link{ }
We use the :link pseudo-class to target all anchors tags which have yet to be clicked on.
a:visted { }
allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visited.
ul + p { }
Adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.
#container > ul { }
will only target the uls which are direct children of the div with an id of container
ul ~ p { }
Sibling combinator. It will select, referring to our example above, any p elements, as long as they follow a ul.
a[title] { }
Attributes selector. will only select the anchor tags that have a title attribute.
a[href="http://net.tutsplus.com"] { }
The snippet above will style all anchor tags which link to http://net.tutsplus.com
a[href*="tuts"] { }
The star designates that the proceeding value must appear somewhere in the attribute's value.
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.