Assessment wanted: CSS Selectors

MDN Learn
1

Please assess the following -

  1. Selectors Three

CSS Code:

a:link { color: orange;}
a:hover { text-decoration: none; }
a:visited { color: green; }

.container p:first-child { font-size: 150%;}
.container:first-line { color: red; }

table tr:nth-child(2n) { background-color: #333; color: white;}

  1. Selectors Four

CSS Code:

h2 + p { color: red; }

ul.list > li{ border-bottom: 1px solid gray; list-style-type: none; }

**Find the tests from here: **Test Your Skills: Selectors

2

Hello @Arittra
you doing great

but this line would not make the font color to be red just a little modification and it would work

.container p:first-child:first-line
another way to achive that useing .container > *:first-child:first-line so it be more generic despite what is the fist child element is it would work for it

and well done for selector 4

hope that help and have a nice day

3

Thank you @justsomeone for assessing my program.

Is the code for “selectors 3” okay now?

a:link { color: orange;}
a:hover { text-decoration: none; }
a:visited { color: green; }

.container > *:first-child { font-size: 150%; }
.container > :first-child:first-line { color: red; }

One thing I don’t understand. What was wrong with “.container:first-line { color: red; }”?

4

first i miss type that :first-line it should be ::first-line sorry for that

and you welcome and yes it fine just add the extra : that i missed

for this
.container:first-line { color: red; }

it mean go to the class container which it the div element in our case here then set the color of it’s first line to red which would not color anything to get better understand of this try to add any word after the opening of the div element like bellow

<div class="container">
this will be red
  <p>Veggies es

and if you change it to .container p::first-line { color: red; } it will make the first line for both p element to be red

try this also .container ::first-line { color: red; } and notice how it get even away from our requirement “there space between container and :”

hope that help and have a nice day

5

Thank you @justsomeone! Your answer was really helpful!

But how did you highlight your code with different colors?

6

you welcome

surround it by ```

and have a nice day

7

var thank_you = true;

8

you welcome @Arittra :joy: