Applying CSS for Only Parent But Not to Children

CSS - How to address only parents and not children

Without the HTML it is difficult, however, you are going to need to use the direct selector in CSS..

If you are trying to apply the rectangle only to the parent ul only, use:

#topmenu > ul:hover {
    /* style */
}

This will apply the CSS to the ul which is a direct child of #topmenu. Therfore it won't apply it to the other children ul.

UPDATED..

Add the following..

#topmenu ul.menu > li li a:hover {
    background: red;
}

If you want it to be the same color as the background..

#topmenu ul.menu > li li a:hover {
    background: #C8C1B7;
}

Apply css rule on everything but not a selector and its children

This should target any direct child of .parent that doesn't have the class of child as well as its descendants:

.parent> :not(.child),
.parent> :not(.child) * {
  background-color: red;
}

<div class="parent">
  <div class="child">
    <div>inside</div>
    <div>inside2</div>
  </div>
  <div>outside</div>
  <div>
    <div>outside!</div>
  </div>
</div>

Apply CSS effect to parent but not children

Insert an additional div and just position it absolute:

<div id="wrapper">
    <div id="test" style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(banner.jpg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%);
    z-index: -2;
"></div>
      <header id="top-wrapper" class="inline-content">
        <div id="logo" class="inline-content">
          <img src="logo.svg" alt="Logo">
          <h1>Tuffi portfolio</h1>
        </div>
        <nav>
          <ul id="menu" class="inline-content">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <section id="banner" class="inline-content">
        <h2>Hello World!</h2>
        <h1>I am Tuffi</h1>
        <h2>and I am a Web Developer</h2>
        <h3>based in London</h3>
      </section>
    </div>

Obviously, remove everything from #wrapper except the height of 100%.

How can i select the parent element without child?

There are no parent selectors in CSS. Check:

Is there a CSS Parent selector?

Parent selectors in CSS

What you can do is styling both elements and then re-writing the style for the child. e.g.:

h1{
    color:blue;
}

h1 > span{
    color:black;
}

apply css in element parent but not in child

jsfiddle demo

//HTML
<div class="wrapper">
    <div class="right">line 1</div>
    <div class="right">line 2</div>
    <div class="right">
        <div class="image">
            <img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
        </div>
    </div>
    <div class="right">line 4</div>
    <div class="right">line 5</div>    
</div>

//CSS
.wrapper{
    padding-top:5px;
    background-color: red;
}
.right {
    width: 100%;
}
.image {
    background-color: green;    
}

Edit:
OP was ok with a jQuery solution, and managed to find that answer himself

$("img.img-thumbnail").parents('div.right').css("background-color", "green");

Alternativ solution is also;
$("img.img-thumbnail").parents('div.right').addClass('green');

//CSS
.green {
    background-color: green;    
}

Styling parent <li> and not children CSS

In CSS the child element gets the style of the parent element until a styling is specified for the child element. Example

.parent{color: red;}

<div class='parent'>Parent<div class='child'>Hello<div>
</div>

---

Related Topics