Kombinieren Sie die CSS von zwei benachbarten Geschwister

Question

Gibt es eine Möglichkeit, die CSS von zwei benachbarten Geschwister zu kombinieren? Ich habe etwas Code, der von einem Wordpress-Theme erzeugt wird, wo ich CSS verwenden möchte, um es zu modifizieren.

Für den Code unten, würde Ich mag die p „Hide-me“, wenn auch eine Klasse die Klasse „myclass“ verstecken Namen „John“

möchte so etwas haben gegeben wurde: (.First-Geschwister .myclass.john) ~ (.second-Geschwister .Hide-me) {display: none;}

<div class="parent"> 
    <div class="first-sibling"> 
    <p class="myclass john">Paragrah to determine the hiding of hide-me</p>  
    </div> 

<div class="second-sibling"> 
    <p class="hide-me">Hide this if myclass has a class named "john" </p> 
</div> 

Danke

Answer 1

Um das zu erreichen, was Sie Mit Ihrem aktuellen HTML-Code werden Sie Javascript benötigen. Die andere Option ist, wenn Sie Klasse john auf die parrent anwenden können, dann können Sie CSS wie diese haben und es funktionieren würde:

.first-sibling.john + .second-sibling{ 
    display: none; 
} 

hier ein JS Fiddle ist https://jsfiddle.net/exk0ex8c/1/

Sie können auch weiter manipulieren HTML so dass die zwei p Elemente unter demselben div sind und dann weiter CSS Selektoren verwenden, um dies zu erreichen. Eine Liste aller CSS-Selektoren finden Sie hier: http://www.w3schools.com/cssref/css_selectors.asp