Let us look at the other ways to select element. When an element is nested inside another element, it becomes its descendant or child. The descendant element can be used for any nested element.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <p>This is paragraph with link <a href="#">Link here</a></p> <h1>Heading</h1> <p>Paragraph</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> |
If we want to select the link between p tags only we will write :
|
1 2 3 |
p a { /*Select only a that are inside p */ } |
Grouping Multiple selectors:
You can also select multiple elements by grouping them in one declaration like:
|
1 2 3 |
h1, h2, h3{ color:blue; } |
This will apply the same CSS to all elements in the list. Each selector is separated an with a comma.
Pseudo-Class Selector:
This is to target specific state of an element.
Syntax for pseudo-classes
|
1 2 3 |
selector:pseudo-class { property:value; } |
Example: Anchor pseudo-classes
|
1 2 3 4 5 6 |
<a href="#">Link</a> <style> a:focus, input:focus{ Outline: 1px solid black; } </style> |
Note:
a: visited must come before a: hover in the CSS definition.
a: active must come after a: hover in CSS definition.