Selector types
CSS selectors are part of CSS syntax, which specify HTML elements to which CSS rules will be applied.
Universal selector
Universal selector is marked with a * (star), and its property is to select all elements. This selector is usually used when resetting styles.
Example
|
1 2 3 4 |
*{ margin: 0; padding: 0; } |
Defined with HTML element type
These are the simplest selectors and are defined by the name of the HTML element they target.
Example
|
1 2 3 4 5 |
p { margin-right: 0rem; padding-right: 0.5rem; text-align: justify; } |
or
|
1 2 3 4 5 |
blockquote { margin-left: $leva_margina; color: #1c6c9f; font-weight: 100; } |
Defined with element class
These selectors “target” HTML elements that contain a certain class.
Example
|
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
A selector that targets a class is marked with . (with a dot) in front of the class name.
|
1 2 3 |
.klasa_linkovi{ color: red; } |
Defined with element ID
These selectors “target” HTML elements that contain a specific ID. They are marked with a # sign in front of the ID name.
Example
|
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
A selector that targets an element with a specific ID is marked with a # sign in front of the ID.
|
1 2 3 |
#super_link{ padding: 1em; } |
Defined with element attribute
HTML elements often contain attributes, so it’s convenient to use them to select an element to apply a style to. A selector that targets an element with an attribute is marked with [ ]square brackets.
|
1 |
<a href="http://neka_stranica.com"<</a> |
[attribute]
The selector in the following example applies to all HTML elements that contain the “href” attribute.
Example
|
1 2 3 |
a[href]{ font-size: 1.5em; } |
[attribute*=”value”]
This selector is more specific than the previous one because in addition to targeting an element that has a certain attribute, it must contain a certain character string within the attribute value. This part does not have to be a word, it is enough to be part of a word.
Example
|
1 2 3 |
a[href*="str"]{ color: black; } |
In the previous example, an element that has a link attribute is selected and the value of that attribute must contain the character string str. With this selector, the following element would also be selected:
|
1 |
<a href="http://neka_stranica.com"<</a> |
[attribute~=”value”]
This selector is more specific than the previous one because in addition to targeting an element that has a certain attribute, it must contain the entire desired word within the attribute value. That word must be separated with “whitespace.
.”Example
|
1 2 3 |
a[rel~="prati"]{ color: black; } |
This selector would select the following element:
|
1 |
<a rel="uvek prati" href="http://neka_stranica.com"<</a> |
[attribute|=value]
This selector is similar to the previous one in that the attribute must contain the entire desired word within the attribute value but the word is separated with | vertical line.
Example
|
1 2 |
a[lang|="en"] { color:red;} |
The previous selector would have selected the following element:
|
1 |
<a lang="en-US" href="http://neka_stranica.com"<</a> |
[attribute^=value]
This selector selects an element whose attribute starts with the specified character string.
Example
|
1 2 3 |
a[src^="https"]{ color:black; } |
So the previous selector could select the next element whose href attribute starts with http://:
|
1 |
<a href="https://neka_stranica.com"<</a> |
[attribute$=value]
This selector selects an element whose attribute ends with the specified character string.
|
1 2 3 |
a[href$=".com"]{ color:black; } |
The previous selector would have selected the following element:
|
1 |
<a href="http://neka_stranica.com"<</a> |
Example
The following example shows the use of selectors that are based on attributes and allow adding the appropriate icon depending on the type of document:
See the Pen Attribute Selectors by ProSystem Studio (@chos) on CodePen.
[attribute=”value”]
This selector is more specific than all the previous ones because it selects all elements that have a certain attribute and it must have the exact required value. In the following example, we will select the link element that has the attribute href and that attribute has the value http://some_page.com
Example
|
1 2 3 |
a[href="http://neka_stranica.com"]{ color: black; } |
Pseudo classes – dynamic
Pseudo state class is a way of selecting a part of an HTML document that includes the dynamic state of an element. Pseudo class syntax to “stick” the pseudo class name to another selector (selector:pseudo-class).
:visited
This pseudo class selects links that have already been visited.
Example
|
1 |
a:visited {color: red;} |
:link
This pseudo class selects not visited links.
Example
|
1 |
a:link {color: red;} |
:hover
This pseudo class selects any element (not just a link!) above which the cursor is located.
Example
|
1 |
a:hover { color:red; } |
:focus
This pseudo class selects the element in focus. Focus is the same as hover but when using the keyboard to navigate through the page. A good example of a focus element is an HTML form input field.
Example
|
1 |
input:focus { color: red; } |
:active
This pseudo class targets the u element when it is active. The element is active from the time it is clicked until the moment the mouse button is released.
Example
See the Pen :active state by ProSystem Studio (@chos) on CodePen.
:enabled
This pseudo class selects an element that is enabled state, i.e. is available to work with. Elements that have this state are: <input<, <select>, <textarea<, <optgroup>, <option<, <fieldset>. It is most often used with an input tag within a form.
Example
In this example, we target the label element after the input field that is available for data entry.
|
1 |
input:enabled { color: #22AA22;} |
::disabled
This pseudo class selects an element that is in a specific disabled state when the element is not active, ie. is unavailable for input. Example of unselected input field.
Example
|
1 |
input:disabled { color: #22AA22;} |
Example of using :enabel & :disable
See the Pen :enable by ProSystem Studio (@chos) on CodePen.
:checked
This pseudo class selects elements that are in a specific checked state. The checked state is usually associated with:
- radio button (<input type=”radio”>)
- checkbox (<input type="checkbox">)
- option (<option> in a <select>)
Example
See the Pen :checked by ProSystem Studio (@chos) on CodePen.
Pseudo classes – positional
:first-child
This pseudo class selects the first element within the parent element, ie. selects any element type that is the first child within the parent element.
Example
See the Pen
:last-child
This pseudo class behaves the same as the previous stim that selects the last child in the parent element.
:nth-child(n)
This pseudo class selects every nth child of the parent element.
See the Pen CSS-Tricks: :nth-child by ProSystem Studio (@chos) on CodePen.
:nth-last-child(n)
This pseudo class selects elements viewed from the back!
Example
In the following example, we will select the last four rows of a table:
|
1 |
tr:nth-last-child(-n+4) |
Example
In the following example, we select every even element, but starting “from end to front”
|
1 |
span:nth-last-child(even) |
:first-of-type
This pseudo class selects the first element within the parent element but of a certain type. This is important if the common parent contains different elements within itself.
|
1 2 3 4 5 6 |
<article> <h1>A Title</h1> <p>Ovaj paragraf targetiramo </p> <p>Paragraph 2.</p> <p>Paragraph 3.</p> </article> |
If we want to select the first paragraph, then we use:
|
1 |
p:first-of-type { font-size: 1.25em; } |
Note:
selector p:first-child would not work in this case because the paragraph is not a first child of its parent since there is another type within the parent <article> that precedes the paragraph.
:last-of-type
This pseudo class behaves the same as the previous stim that selects the last child in the parent element.
:nth-of-type(n)
This pseudo class selects every nth child of a given type in the parent element.
:nth-last-of-type(n)
This pseudo class selects elements of a certain type in the parent element “viewed from the back”!
Pseudo classes – general
:empty
This pseudo class selects an element that has no children.
Example
|
1 |
:empty |
This selector would select the following element:
|
1 |
<p></p> |
:not
this pseudo class behaves like a negation:
Example
|
1 |
button:not([DISABLED]) |
The pseudo class from the previous example selects all buttons that are not disabled.
NOTE about spaces!
A pseudo-class is added to the selector without spaces. If there is a space, a complex selector is created.
Pseudo elements
Pseudo elements “look” like HTML elements but they are not standard HTML elements.
::before
This selector allows setting the style to a part that is not yet defined in the document and is before another element.
::after
This selector allows setting a style on a part that is not yet defined in the document and will come after another element.
See the Pen Pseudo elements ::before and ::after by ProSystem Studio (@chos) on CodePen.
::first-letter
This selector targets the pseudo element “first letter”.
See the Pen Pseudo element ::first-letter by ProSystem Studio (@chos) on CodePen.
::first-line
This selector targets the pseudo element “first line”.
NOTE:
Pseudo elements cannot be applied to inline styles and must be lastdefined in the selector chain. If used, they should be placed after the class or ID of the selector and it is possible to define one pseudo-element per selector.
Element selectors in specific relationships
Elements from the same lineage
If we want to select a descendant of a selector and thereby increase the specificity, it is enough to add another selector and put a space between them.
See the Pen Descendants of a Family Line by ProSystem Studio (@chos) on CodePen.
Element with two arguments
If we put two HTML elements next to each other in the selector without spaces we will not get the same effect as when there is a space. See the difference in the following example.
See the Pen Brother Selector by ProSystem Studio (@chos) on CodePen.
Element direct descendant of “el1>el2”
Applies to all elements that are direct descendants of their parent (does not apply to “grandchildren”)
See the Pen Element selector whose parent is … by ProSystem Studio (@chos) on CodePen.
Element closest next sibling “el1+el2”
The function of this selector is to select the element’s “sibling”, ie. the one immediately after the first selected element type.
See the Pen First Brothers by ProSystem Studio (@chos) on CodePen.
Element with predecessor “el1~el2”
Refers to any element that is preceded by another element somewhere in the code (they don’t have to be one after the other)
See the Pen ExampleEdit by ProSystem Studio (@chos) on CodePen.
Conclusion
Choosing the right selector can be very messy if you approach the problem from the wrong side. I will explain this on the example of the main menu, which I want to change the color on hover. If I select the selectors as in the first example, I will change the color of only one element, while in the second example I affect the entire menu branch.
See the Pen Element Layout by ProSystem Studio (@chos) on CodePen.
Explanation:
In the previous example, the difference is drastic due to the order of the elements inside the selector. In the first case, the hover reacts to the “a” tag in the frame”li” tag, while in the second one the “li” tag reacts to the hover (“li” tag is the whole branch – see the code below) and all the “a” tags inside it.
|
1 2 3 4 5 6 7 |
<li> <a href="#">22</a <ul> <li><a href="#">221</a></li> <li><a href="#">222</a></li> </ul> </li> |
Factors that influence the importance of selectors
a) Position where style
is definedDepending on the location where the style is defined, its “importance” depends. The following list is sorted by style location importance from strongest to weakest:
- Browser Defined Styles applies default styles to defined tags
- User-defined styles in the browser are browser styles that are additionally defined by the user
- Author styles written by you as the author:
- 3.1 Inline styles inserted into a tag are valid only within that tag
- 3.2 Styles written in html are styles that are inserted between <style></style> tags and are valid for the entire page
- 3.3 External styles defined in separate css files and linked in the html document,
b) Position of the selector within the CSS code
If two declarations happen to have the same position where they are defined and the same specificity, the last defined style will be applied.
c) Accumulation of elements
Accumulating more elements narrows the selection and thus increases the overall specificity of the selector. The strength of the selector is obtained by summing all the weights of the individual selectors. Therefore, the selection of more difficult elements increases the overall specificity of the selector.
d) “Weight” of elements
Each type of element has its own “weight”, the heavier the element, the more specific it is.
- HTML tag selector (1 point)
- class, attribute selectors and pseudo selectors (10 points)
- Selector ID (100 points)
NOTE:
Universal selector and child selector have no value in the calculation of specificity.
Example:
- p
has specificity of 0,0,0,1 (1 HTML selector = 1) - div p
has specificity of 0,0,0,2 (2 HTML selectors=1+1=2) - .tree
has specificity of 0,0,1,0 (1 class selector=10) - p:first-child
has specificity of 0,1,1, (1 pseudo selector + 1 HTML selector=10+1=11) - div p.tree
has specificity of 0,0,1,2 (2 HTML selectors + 1 class selector=1+1+10=12) - #baobab
has specificity of 0,1,0,0 (1 id selector = 100) - body #content .alternative p
has specificity of 0,1,1,2
(HTML selector + id selector + class selector + HTML selector=1+100+10+1=112) - Inline CSS element inserted in HTML
has specificity of 1,0,0,0 (1 INLINE selector=1000)
Specificity calculation site here