2 replies [Last post]
css_Ivan
css_Ivan's picture
Offline
newbie
Last seen: 10 weeks 51 min ago
Timezone: GMT-4
Joined: 2019-09-28
Posts: 2
Points: 3

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

css_Ivan
css_Ivan's picture
Offline
newbie
Last seen: 10 weeks 51 min ago
Timezone: GMT-4
Joined: 2019-09-28
Posts: 2
Points: 3

css_Ivan wrote: Hello I just

css_Ivan wrote:

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

Ranjan Acharya
Ranjan Acharya's picture
Offline
newbie
Bangalore
Last seen: 9 weeks 2 days ago
Bangalore
Timezone: GMT+5.5
Joined: 2019-10-03
Posts: 2
Points: 3

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.