Sat, 2019-09-28 03:17
Hello
I just started playing around with CSS and have looked at resources online, but have problems with some basics, like nested selectors:
Example:
CSS:
a {color: black;}
.classA {color: red;}
.classA a {color: blue;}
.classA .classA2 {color: green;]
.classA .classA2 h1 {color: light green;]
.classA .classA2 a {color: dark green;]
.classB {color: yellow;}
.classA .classB h1 {color: magenta;}
.classA a, .classB h1, .classC span {color: magenta;}
HTML:
<a class="classA" href="">Link 1 </a> <a class="classA classB" href="">Link 2 </a> <a class="classA2" href="">Link 3 </a>
What colors will the Link 1, Link2 and Link 3 be?
I know how simple 1 to 1 selectors work, but when we have multiple selectors it becomes all very confusing.
Any help appreciated!
Ivan
Sat, 2019-09-28 16:50
#1
css_Ivan wrote: Hello I just
Hello
I just started playing around with CSS and have looked at resources online, but have problems with some basics, like nested selectors:
Example:
CSS:
a {color: black;}
.classA {color: red;}
.classA a {color: blue;}
.classA .classA2 {color: green;]
.classA .classA2 h1 {color: light green;]
.classA .classA2 a {color: dark green;]
.classB {color: yellow;}
.classA .classB h1 {color: magenta;}
.classA a, .classB h1, .classC span {color: magenta;}
HTML:
<a class="classA" href="">Link 1 </a> <a class="classA classB" href="">Link 2 </a> <a class="classA2" href="">Link 3 </a>
What colors will the Link 1, Link2 and Link 3 be?
I know how simple 1 to 1 selectors work, but when we have multiple selectors it becomes all very confusing.
Any help appreciated!
Ivan
Please delete this post, made a mistake posting it. Thank you!
Ivica
Thu, 2019-10-03 11:12
#2
Link Colour from CSS property
When you implement nested CSS class selector then the child class property will be implanted to the links. So as per your code, the link 1 will be red, link 2 will be yellow and link 3 will be green. Whenever you are having external links on the webpage always include noopener and noreferrer attribute and make sure you have proper canonical tags to improve SEO of the website.