Css selectors are used to address them in various ways. If you assign a selector in HTML, you can use stylesheet to access it. So you can style any elements as you like and develop your own style from them.
| Selector | Explanation |
|---|---|
| .classname | Selects all elements with class="classname" |
| .class1.class2 | Selects all elements with both class1 and class2 set within its class attribute |
| .class1 .class2 | Selects all elements with class2 that is a descendant of an element with class1 |
| #idname | Selects the element with id="idname" |
| * | Selects all elements |
| p | Selects all <p> elements |
| p.class | Selects all <p> elements with class="intro" |
| div, p | Selects all <div> elements and all <p> elements |
| div p | Selects all <p> elements inside <div> elements |
| div > p | Selects all <p> elements where the parent is a <div> element |
| div + p | Selects all <p> elements that are placed immediately after <div> elements |
| p ~ ul | Selects every <ul> element that are preceded by a <p> element |
| [target] | Selects all elements with a target attribute |
| [target=_blank] | Selects all elements with target="_blank" |
| [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| a[href*="tnado"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |
| a:active | Selects the active link |
| a:hover | Selects links on mouse over |
| a:visited | Selects all visited links |
| a:link | Selects all unvisited links |
| p::after | Insert something after the content of each <p> element |
| p::before | Insert something before the content of each <p> element |
| p:first-child | Selects every <p> element that is the first child of its parent |
| p::first-letter | Selects the first letter of every <p> element |
| p::first-line | Selects the first line of every <p> element |
| p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) |
| p:last-child | Selects every <p> element that is the last child of its parent |
| p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :not(p) | Selects every element that is not a <p> element |
| p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| p:only-child | Selects every <p> element that is the only child of its parent |
| p:empty | Selects every <p> element that has no children (including text nodes) |
| input:focus | Selects the input element which has focus |
| input:in-range | Selects input elements with a value within a specified range |
| input:indeterminate | Selects input elements that are in an indeterminate state |
| input:checked | Selects every checked <input> element |
| input:default | Selects the default <input> element |
| input:disabled | Selects every disabled <input> element |
| input:enabled | Selects every enabled <input> element |
| input:invalid | Selects all input elements with an invalid value |
| input:optional | Selects input elements with no "required" attribute |
| input:out-of-range | Selects input elements with a value outside a specified range |
| input::placeholder | Selects input elements with the "placeholder" attribute specified |
| input:read-only | Selects input elements with the "readonly" attribute specified |
| input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| input:required | Selects input elements with the "required" attribute specified |
| input:read-only | Selects input elements with the "readonly" attribute specified |
| input:valid | Selects all input elements with a valid value |
| :root | Selects the document's root element |
| ::selection | Selects the portion of an element that is selected by a user |
| #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
This is the list of all CSS selectors. I will show you how to use some of them and then it should actually be relatively understandable. The above in the table are only examples, you can use the CSS Selectors all on various HTML tags.
Examples of use CSS selectors
For example, CSS selectors such as after or before can be used on almost all elements and are very useful to carry out rework for improvement or to set empty spaces. However, something has to be observed with them, because if they have no content they will not be used and will not work. So here is a small demonstration.
0 .classname::after { 1 content: ''; 2 display: block; 3 /* Here you can do more, e.g. write a picture or something in the content attribute, this content attribute is important to display it even if it is empty. */ 4 } 0 <div class="classname"> 1 Any content 2 </div> I'd rather be avoided to be used often, instead use body classes and name them recognizable so that you don't get mixed up.
Additional information
To code object-oriented with CSS Selectors you can also use LESS or SASS, then everything would be much clearer. But you should use this if you have some experience with CSS selectors yourself.
So if you need more examples just write a comment and subscribe to one of our social networks to support us. We would also be happy to share the article and you can do this immediately below on the respective network.
Advertising