Can't Select Element with ID and Classname?-CodePudding

So I am working on HTML and CSS now and Currently I am facing a doubt regarding selecting elements in CSS. So I know that for selecting a class we use .Classname{} and for Id we use #IDname{}. But My Main Confusion is that I ain't able to select items like these #ID.Class{}. Below is the example of what i am talking about. Please Help ?

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>

CSS CODE :-

.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;
}

Now this one shows error but in online tutorilas, it is used effectively .I don't know why i cant select it with this ..is this even allowed ? Pardon me if i sound stupid

#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;
    }

CodePudding user response：

space betwwen #name and .cta try this code :

#name .cta{   
  font-family:'Neucha',cursive;
  display: inline-block;
  text-decoration:none;
  padding: 1px 10px;
  color: #000;
  border: 2px solid crimson;
  border-radius: 7px;
  font-size:22px;
  background-color: transparent;
  margin-top:3px;
  transition: ease .5s background-color;
  text-transform: uppercase;
}

<!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>
</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>
</html>

CodePudding user response：

#name .cta

keep space between #name and ,

CodePudding user response：

Although this is not recomanded since it is very deep, still posible. #name .container div .cta{}