CSS3 :not() selector Issue with child elements

Question

I have a problem deselecting the child element using css3 :not selector.

I have ap element containing span as child and sub child with an anchor element. I want to make the opacity of the texts containing inside the p excluding any anchor elements.

What am I doing wrong here?

 @import url(https://fonts.googleapis.com/css?family=Lato); a { color: #fde217; } .contactinfo-wrap { position: relative; margin: 40px; font-family: Lato; background-color: #00254a; color: #ffffff; padding: 30px; } .contactinfo-wrap p:not(a) { color: #ffffff; opacity: .6; } .contactinfo-wrap p:not(strong) { color: #ffffff; } 

 <div class="contactinfo-wrap"> <p><strong><span class="details">Postal Address</span></strong></p> <p> <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span> <span class="details">PO Box 35142 Collins Street West<br> 120 King Street, Melbourne<br> Victoria 2000 Australia</span></p> <p class="phone"> <span class="icon"><i class="fa fa-phone fa-lg"></i></span> <span class="details">+60 0 0000 0000</span></p> <p> <span class="icon"><i class="fa fa-envelope fa-lg"></i></span> <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span> </p> </div> 

Answer 1

p:not(a) means "An element that is a p but which is not an a " (which is all p elements).

There is no way in CSS to select an element based on features of its descendants.

Your best bet would be to preprocess the HTML (in a programming language) and add class attributes to the paragraphs you wanted to match.

Answer 2

avoiding :not selector, an alternative could be using rgba to color your font:

 @import url(https://fonts.googleapis.com/css?family=Lato); a { color: #fde217; } .contactinfo-wrap { position: relative; margin: 40px; font-family: Lato; background-color: #00254a; color: #ffffff; padding: 30px; } .contactinfo-wrap p { color: rgba(255, 255, 255, 0.6); } .contactinfo-wrap strong { color: rgba(255, 255, 255, 1); } .contactinfo-wrap a { color: rgba(255, 255, 0, 1); } 

 <div class="contactinfo-wrap"> <p><strong><span class="details">Postal Address</span></strong> </p> <p> <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span> <span class="details">PO Box 35142 Collins Street West<br> 120 King Street, Melbourne<br> Victoria 2000 Australia</span> </p> <p class="phone"> <span class="icon"><i class="fa fa-phone fa-lg"></i></span> <span class="details">+60 0 0000 0000</span> </p> <p> <span class="icon"><i class="fa fa-envelope fa-lg"></i></span> <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span> </p> </div> 

Answer 3

Here it is what you want: http://codepen.io/lizardhr/pen/eZOwZM

Remember that CSS is a cascading style sheets which describe what style is needed for each element listed in a markup language like HTML.

All elements style described after others take effects and the styles before it are discarded so if an element like your <strong> and <a> tags need a different style of the containing element, eg your .contactinfo-wrap <div> you need to style them after it.

@import url(https://fonts.googleapis.com/css?family=Lato);

.contactinfo-wrap {
  position: relative;
  margin: 40px;
  font-family: Lato;
  background-color: #00254a;
  color: #ffffff;
  padding: 30px;
}

.contactinfo-wrap p {
  color: #ffffff;
  color: rgba(255,255,255,0.6);
  /* opacity: .6; */
}


strong {
  color: inherit; /* put the style you want here */
}

a {
  color: #fde217;
}

Answer 4

You are missing a space in your selector:

.contactinfo-wrap p :not(a) {}

This selects all child elements inside the <p> which are not an anchor.

 @import url(https://fonts.googleapis.com/css?family=Lato); a { color: #fde217; } .contactinfo-wrap { position: relative; margin: 40px; font-family: Lato; background-color: #00254a; color: #ffffff; padding: 30px; } .contactinfo-wrap p :not(a) { color: #ffffff; opacity: .6; } .contactinfo-wrap p :not(strong) { color: #ffffff; } 

 <div class="contactinfo-wrap"> <p><strong><span class="details">Postal Address</span></strong></p> <p> <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span> <span class="details">PO Box 35142 Collins Street West<br> 120 King Street, Melbourne<br> Victoria 2000 Australia</span></p> <p class="phone"> <span class="icon"><i class="fa fa-phone fa-lg"></i></span> <span class="details">+60 0 0000 0000</span></p> <p> <span class="icon"><i class="fa fa-envelope fa-lg"></i></span> <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span> </p> </div>