CSS selector to modify TAG before or after inside the div

Asked

Viewed 1,108 times

1

I’m in doubt when applying some styles to css. I wish to modify a tag using a div within it:

header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 64px;
    max-height: 1000px;
    white-space: nowrap;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-property: max-height,box-shadow;
       -moz-transition-property: max-height,box-shadow;
        -ms-transition-property: max-height,box-shadow;
         -o-transition-property: max-height,box-shadow;
            transition-property: max-height,box-shadow;
    background-color: #00bcd4;
    color: #ffffff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

header .drawer-button {
    display: block;
    position: absolute;
    height: 48px;
    width: 48px;
    border: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    font-size: 26px;
    line-height: 50px;
    margin: 10px 12px;
    top: 0;
    left: 0;
    color: #ffffff;
    z-index: 4;
}

header .li-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    margin: 0;
    padding: 0 15px 0 80px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

header .li-row > * {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

header .layout-spacer {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

header .action-drawer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 64px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

header .action-drawer > .drawer-button {
    position: inherit;
    margin: inherit;
}

header .layout-spacer > input[type="search"] {
    border: none;
    width: 50%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    color: black;
}

header .layout-spacer > input[type="search"]:focus, input[type="search"]:focus + header.color, header .layout-spacer > input[type="search"]:focus + .color {
    background-color: white;
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}
<header class="color">
    <div class="drawer-button"></div>
    <div class="li-row">
        <!-- Title -->
        <h1 class="text-title">Title</h1>
        <!-- Center Espace -->
        <div class="layout-spacer">
            <input type="search" class="text-subhead" />
            <div class="color">oi</div>
        </div>
        <!-- Navigation -->
        <div class="action-drawer">
            <div class="drawer-button"></div>
            <div class="drawer-button"></div>
        </div>
    </div>
</header>

I want to change the color of the <header> through the <input type="search"> unused jQuery, only using css.

css selectors

  • What you really want to do?

  • 1

    Do you want to change the color of the <header> when someone clicks on the <input type="search">? if that is not possible to do without JS because to do so you would need "Parent selectors" (select parents of an element) that exist only in the css4 spec, which is still minimally supported by browsers.

  • change the color of <header> by clicking on <input type="search"> for :focus

  • @iLeonardoCarvalho unfortunately, using CSS only will be impossible as the element input is child of the element header, therefore, it cannot change styles. Only a parent element can change the child element, the reverse element does not work. You need JS to make this selection.

  • can then create a loaded class in the <body> as a parent element for me to modify in <input type="search"> making the change in <header>?

  • I thought you could create a rule in CSS like: header .input:focus + header { ... } since the condition is and and apply on <header>, if anyone has any other way I’m open to suggestions.

  • 2

    Impossible per hour, if you know English of a read in this article: http://snook.ca/archives/html_and_css/css-parent-selectors , the CSS4 will get the :has() which we use today at jQuery which would apply perfectly to your interest.

Show 2 more comments

1 answer

2


As Felipe Assunção reported, there is no method to modify a property in a parentElement from the childElement still, this will only be present in CSS4... you can do this with both jQuery and pure javascript. Here’s an example I put together that does exactly what you need in pure javascript:

var inputSearch = document.querySelector('header input[type=search]');

inputSearch.addEventListener('focus', function() {
  this.parentElement.parentElement.parentElement.classList.toggle('searchfocus');
}, false);

inputSearch.addEventListener('blur', function() {
  this.parentElement.parentElement.parentElement.classList.toggle('searchfocus');
}, false);
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 * {
  margin: 0;
  padding: 0;
  outline: none;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}
header {
  width: 100%;
  height: 50px;
  background: #2b82ad;
  transition: all 0.2s ease-in-out;
}
header.searchfocus {
  background: #00405d;
}
header,
header > section {
  display: flex;
  align-items: center;
}
header button {
  height: 50px;
  min-width: 50px;
  padding: 10px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
button:hover {
  background: rgba(0, 0, 0, 0.1);
}
button:active {
  background: rgba(0, 0, 0, 0.2);
}
button,
h1 {
  text-shadow: 1px 1px 2px #222;
  user-select: none;
}
button .fa {
  font-size: 150%;
  padding: 5px;
}
header > section {
  flex-grow: 1;
  justify-content: space-between;
}
header > section > h1 {
  padding: 10px;
}
header > section > nav > input[type=search] {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #77B8D8;
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 90%;
  width: 200px;
  margin: 0 5px;
}
input[type=search]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=search]:-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=search]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=search]:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=search]::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input[type=search]:placeholder-shown {
  color: rgba(255, 255, 255, 0.5);
}
<header>
  <button><i class="fa fa-bars"></i></button>
  <section>
    <h1 class="text-title">Hello World</h1>
    <nav>
      <input type="search" class="" placeholder="procurar" />
      <button>Sobre</button>
      <button>Contato</button>
    </nav>
  </section>
</header>

  • 1

    Thanks for giving me feedback, I will follow the advice of everyone, already my concern is the compatibility between old versions of the browsers since we have CSS3 very stable, but using pure Javascript I see good solutions. I’ve seen many apps use <input type checkbox> with :checked to activate menus hidden by transform: translate, and I wondered how CSS evolved I think we’re going to arrive at an era that will be difficult to use the JavaScript :) I’m going to study the CSS4 as @Felipe mentioned the site and thanks for the @Leandro example, I was wondering if you plan to do in Angular

  • Dude, since what you need is really simple, I don’t think it’s usual to work with Angularjs for this. Angular is better for data manipulation... now, if your application already contains it, I see no problems with that...

  • I have some applications in Angular and I don’t know if mixing languages can affect performance. I like to use Angular because of the routes and the separation of content without needing to load-lás again and I don’t know if it will disturb I use the UI-Router.

Browser other questions tagged css selectors

You are not signed in. Login or sign up in order to post.