+ 4

In CSS, can an ID inherit a Class?

For example, I got a header with a class denominated "x" and I wanna insert a image with an ID denominated "y" inside the header. I wanna the width of the image 50% the size of the width of the header. My CSS code right now is: body{ font-family: arial, sans-serif; background-color: white; color: black; } .cabecalho{ position: relative; max-width: 100%; max-height: 100px; border: 1px solid black; } #logoCabecalho{ position: relative; width: 50%; height: 50%; } My HTML code right now is: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Document</title> <link rel="stylesheet" type="text/css" href="StyleSheet/stylesheet.css"/> </head> <body> <header class="cabecalho"> <img src="https://d2yty0x2cuh2al.cloudfront.net/uploads/image/file/15384/regular_profite.jpg" id="logoCabecalho"/> <div id="busca"> </div> </header> </body> </html> But this doesnt make the image 50% the width and height of my header. How can I do it?

html css javascript end web js design frontend front

28th Nov 2017, 4:26 AM

Lucas Pineda

4 Answers

+ 7

The image already set to 50%. Try to add a border in that id, you will notice it. border: 2px solid red; height should set to auto.

28th Nov 2017, 5:25 AM

Calviղ

+ 2

Thank you guys, I'll be testing and soon telling the results

29th Nov 2017, 11:12 AM

Lucas Pineda

+ 2

@Isaac, why did you use 'display: inline-block; overflow: hidden;'? I tested the code without these two lines and it worked the same way. Thanks for the comments tips :D

29th Nov 2017, 10:12 PM

Lucas Pineda

+ 2

Is there any difference if I style element by ID like I did on my code rather than styling like Isaac did, styling by the element in general? I did: .cabecalho{ code } Isaac did: header { code }

29th Nov 2017, 10:37 PM

Lucas Pineda