If a pseudo-class is used to define special features of an element, a CSS pseudo-element is used to customize specific parts of an element. On the other hand, a selector is used to select elements with a specified attribute. A combinator is something that states the relationship between selectors.
nth-child
:nth-child() – pseudo-class that selects the element of the same type, depending on the number between the brackets.
|
1 |
td:nth-child(2) /* format the second cell in the row */ |
nth-last-child
:nth-last-child() – pseudo-class that selects an element of the same type, from end to beginning, the last having the value 1, the penultimate 2, etc.
|
1 |
td:nth-last-child(2) /* formats the second to last cell of the row */ |
only-child
:only-child – pseudo-class that selects the mentioned element, only if it is included in another type of element.
|
1 2 3 4 5 |
<style> p:only-child {color: red;} </style> <div><p>Lorem ipsum</p></div> <!-- Formats--> <p>Lorem ipsum</p><!-- Ignore --> |
target
:target – pseudo-class that highlights the active HTML anchor. The example below will create tabs quickly..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div.tab div {display: none;} div.tab div:target {display: block;} </style> <div class="tab"> <a href="#ref1">Tab 1</a> | <a href="#ref2">Tab 2</a> | <a href="#ref3">Tab 3</a> <div id="ref1"> <h2>Tab 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="ref2"> <h2>Tab 2</h2> <p>Curabitur tincidunt lacus eget tincidunt tempus</p> </div> <div id="ref3"> <h2>Tab 3</h2> <p>Donec commodo massa metus, non fermentum mi ultricies sit amet.</p> </div> </div> |
Example
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tab 2
Curabitur tincidunt lacus eget tincidunt tempus
Tab 3
Donec commodo massa metus, non fermentum mi ultricies sit amet.
[attribute=”value”]
[attribute^=value] – (selector) selects the attribute (id, class) whose value starts with a specific text.
|
1 2 3 4 5 6 7 |
<style> div[id^="test"] {background: orange;} </style> <div id="test1">This content will be highlighted.</div> <div>This content will not be highlighted.</div> <div id="test2">This content will also be highlighted.</div> <div>This content will not be highlighted either.</div> |
Example
marker
::marker – pseudo-element that selects the checkbox of a list element, which usually contains a bullet or a number.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .marker ::marker { color: coral; font-size: 1.25em; line-height:1; } .marker_tip ::marker { content: '\00BB'' '; margin:0 15px; padding: 0 15px; color: blue; font-weight:bold; font-size: 1.2em; line-height:.75; } </style> <ol class="marker"> <li>Line 1</li> <li>Line 2</li> <li>Line 3</li> </ol> <ul class="marker"> <li>Line 1</li> <li>Line 2</li> <li>Line 3</li> </ul> <ul class="marker_tip"> <li>Line 1</li> <li>Line 2</li> <li>Line 3</li> </ul> |
Output
- Line 1
- Line 2
- Line 3
- Line 1
- Line 2
- Line 3
- Line 1
- Line 2
- Line 3
Combinators.
- descendant selector (space) – matches all elements that are descendants of a specified element.
- child selector (>) – selects all elements that are the children of a specified element.
- adjacent sibling selector (+) – select an element that is directly after another specific element.
- general sibling selector (~) – selects all elements that are next siblings of a specified element.
a) Example
|
1 2 3 4 5 6 7 8 9 10 |
<style> div.descend span.descend { background-color: orange; } </style> <div class="descend"> <p><span class="descend">Applicable format</span></p> <div><span class="descend">Applicable format</span></div> </div> <p><span class="descend">Inapplicable format</span></p> |
Output
Inapplicable format
b) Example
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div.child > span.child { background-color: orange; } </style> <div class="child"> <span class="child">Applicable format</span> <p><span class="child">Inapplicable format</span></p> <span class="child">Applicable format</span> </div> <span class="child">Inapplicable format</span> |
Output
Inapplicable format
Applicable format
Inapplicable format
Inapplicable format
Inapplicable format
Applicable format
Inapplicable format
c) Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div.sibling + p.sibling { background-color: yellow; } </style> <p>Format neaplicabil</p> <div class="sibling"> <p class="sibling">Inapplicable format</p> </div> <p class="sibling">Applicable format</p> <p class="sibling">Inapplicable format</p> <div class="sibling"> <p class="sibling">Inapplicable format</p> </div> <p class="sibling">Applicable format</p> <p class="sibling">Inapplicable format</p> |
Output
Inapplicable format
Inapplicable format
Applicable format
Inapplicable format
Inapplicable format
Applicable format
Inapplicable format
d) Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div.gen_sibl ~ p.gen_sibl { background-color: orange; } </style> </head> <body> <p class="gen_sibl">Inapplicable format</p> <div class="gen_sibl"><p class="gen_sibl">Inapplicable format</p></div> <p class="gen_sibl">Applicable format</p> <span class="gen_sibl">Inapplicable format</span> <p class="gen_sibl">Applicable format</p> |
Output
Inapplicable format
Inapplicable format
Applicable format
Inapplicable format
Applicable format
- See also the CSS Tabs post for other ways to make tabs in an easy way.
- W3Schools.com
