How to create exceptions in CSS


#1

Here’s a link to what I’m currently working on: https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/learn-css-selectors-visual-rules/projects/css-selectors

I was curious if there was any way to create an “exception” per se.

Here is my code:

 img {
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  border-radius: 8px;
  border: 3px solid white;
  display: block;
  
}
.description {
  font-size: 20px;
  text-align: center;
}
#cook-time {
  font-weight: bold;
}
.ingredients li {
  list-style: square;
}
p.time {
  color: white;
}
a.external-link {
  color: black;
}
html, body {
  font-family: Helvetica;
  background-color: rgb(128, 113, 113);
  padding: 20px;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
  color: white;
}
h1 {
  text-align: center;
}

As you can see, I created a shadow around all text. I want to remove the shadow around the text a.external-link, and I also would like to add the shadow to the bullets and numbers in the lists.

What is the most syntax-respecting way to do this?


#2

I think you can use :not() | selector not css tricks in order to achieve what you want :slight_smile: Just provide the element that you don’t want to apply the shadow along the ones you want separated by a comma.

Example:

html, body, a:not(:external-link) {
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}