How to set css child element but not apply for inside element of child element?

Triet Pham

I have simple code as below. I want set css red color for text aaa. You can see i have set css for span I thinked that only text aaa will set red color, however css applied for both aaa and bbb. I don't understand it. Please explain it for me.

<!DOCTYPE html>
<html>
  <head>
      <title>Page Title</title>
      <style>
          #test > span {
              color:red
          }
      </style>
  </head>
  <body>
      <div id="test">
          <span>aaa
              <span>bbb</span>
          </span>
      </div>
  </body>
</html>

Yasaman.Mansouri

try this css!

#test > span >span{
    color:black;
}

#test > span{
    color:red;
}
<!DOCTYPE html>
<html>
  <head>
      <title>Page Title</title>
  </head>
  <body>
      <div id="test">
          <span>aaa
              <span>bbb</span>
          </span>
      </div>
  </body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to access a child element of $(this)

How to set DOM element as the first child?

How to select odd child of dl element with css?

CSS focus on child element change a parent element

How to not apply [routerLink] on a child element?

CSS select an element with no certain child element

How does CSS find a child element ?

How to apply css property to a child element using JQuery

Set attribute to a child element

How to target child element in css within a div?

How to apply rule to child element only after It is created (CSS)?

CSS set width of element to 110% of previous child

Apply hover effect on child element

How do you disable the set width of parent element for child element?

How to select child element inside first, second or third html element with CSS classes?

Apply css style to child element of parent class

How to select a child element inside a div using CSS

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

How to set the cursor in the child of a contentEditable element?

How to set overflow values from parent element to child element?

Apply CSS rules if element isn't a child of other element

how to target an element child in css

How to extend a child element when parent element has padding inside?

How to apply CSS on child element when hover parent element?

Css problem how to apply changes when i hover a parents child element to another parents child element?

How to apply style to child of element with active state

How to select child element using parent element id in CSS?

How can set element alignment which is inside parent with the child style setting in element style attributes?

How to apply CSS to an element which doesn't have a certain element as a child? JS solution allowed