Currently, I'm diving into the world of HTML and CSS and have encountered a question about selecting elements in CSS. I understand that we use .Classname{} to select a class and #IDname{} to select an ID. But my main confusion lies in trying to select items like #ID.Class{}. Below is an example of what I mean. Can someone please help me out?
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anime Website Design</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<!-- Name Section -->
<section id="name">
<div class="name container">
<div>
<h1 class="Heading">Hello ,Sumit is here ! </h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
</body>
.cta{ //Works Fine
font-family:'Neucha',cursive;
display: inline-block;
text-decoration:none;
padding: 1px 10px;
color: white;
border: 2px solid crimson;
border-radius: 7px;
font-size:22px;
background-color: transparent;
margin-top:3px;
transition: ease .5s background-color;
text-transform: uppercase;
}
I've tried using #name.cta in my CSS code but it shows an error. However, I've seen it being used effectively in online tutorials. Does anyone know why I can't select it this way? Maybe I'm missing something obvious, so apologies if I sound silly.
#name.cta{ //THIS SHOWS ERROR(NOT ABLE TO GET OUTPUT)
font-family:'Neucha',cursive;
display: inline-block;
text-decoration:none;
padding: 1px 10px;
color: white;
border: 2px solid crimson;
border-radius: 7px;
font-size:22px;
background-color: transparent;
margin-top:3px;
transition: ease .5s background-color;
text-transform: uppercase;
}