Target specific set of CSS classes - javascript

I have two instances of elements in my document. One is with just a class of slide and the other with a class of slide and slide--current. Below is an example of this markup.
<div class="slide slide--current">
<h2 class="title title--centered title--modifier">Slide 1</h2>
<div class="text-block">
<p>text</p>
</div>
</div>
<div class="slide">
<h2 class="title title--centered title--modifier">Slide 2</h2>
<div class="text-block">
<p>text</p>
</div>
</div>
If I want to target text-block when it has slide--current as the parent I would use .slide--current > .text-block as my selector. But what if I want to target text-block when it doesn't have slide--current? I'm asking because both elements need to have the class slide applied to them at all times. If I use .slide .text-block styles will be applied to slide--current when they shouldn't be. Is this a case foe the :not() selector?

You can use a pseudo-selector:
.slide:not(.slide--current) {
// styling here
}
In your case, as long as .text-block is always a direct child of .slide:
.slide > .text-block {
// Apply to all text blocks regardless of state of slide
}
.slide:not(.slide--current) > .text-block {
// Only applied if parent slide is not current
}
You could probably achieve the same result by reading the answer by #Rounin and avoid pseudo-selectors by reversing your thought process and setting some base styles for all text-blocks first then overriding them when the slide is current.

But what if I want to target text-block when it doesn't have
slide--current?
This is a lesson in how to use the cascade in CSS in the right order.
.text-block {
BASIC .text-block STYLES
}
.slide .text-block {
ADDITIONAL .slide .text-block STYLES
}
.slide--current .text-block {
ADDITIONAL .slide--current .text-block STYLES
}
Basically, you start with the core styles and you add, cumulatively, as the context grows increasingly specific.

Related

I don't get the difference between adding tippy(".class .class") and tippy(".class, .class) and also what is the function of [0] in the code [duplicate]

Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.&lt/p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/

change css for parent div when hover on link [duplicate]

This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 1 year ago.
I tried this solution but am missing something: change background of parent div on hover
Here is my html:
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
This is what I tried to use in an override here: /templates/shaper_helixultimate/html/com_content/category/default_children.php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
$('.box > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
})
});
');
http://jsfiddle.net/t5hf8qdc/
What am I doing wrong?
$('.box > .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
The selector .box > .titlelink looks for a parent-child relationship. You don't have that.
Use .box .titlelink instead.
$('.box .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
.hover {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
As #isherwood mentioned, the solution you linked to uses a different structure than what you have. The > in CSS selectors specifies that you're targeting a direct child, while just leaving a space between the two selectors looks for any descendant.
.box > .titlelink {
/* targets where .titlelink is a child of .box */
}
.box .titlelink {
/* targets where .titlelink is a descendant of .box */
}
If you want to use a strict CSS selector like the solution you referenced, you could do:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
});
Although this will add the hover class to the .item-title element, not to the .box element. Assuming that you specifically want target the .box ancestor of whatever you're listening for the hover event on, then you want:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parents('.box').toggleClass('hover');
});
since jQuery's parents method allows you to pass a selector to target a specific ancestor, travelling multiple levels up through the tree.

How to apply boolean operators not, and [duplicate]

This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 6 years ago.
codepen
div:not(.wayne) div:not(.garth) .content {
background-color:red;
}
<div class="wayne">
<div class="content">Party On Garth</div>
</div>
<div class="garth">
<div class="content">Party On Wayne</div>
</div>
<div class="Saitama">
<div class="content">One punch.</div>
</div>
<div class="Naruto">
<div class="content">Dattebayo</div>
</div>
The background should be red unless the class is either .garth or .wayne. How can I do this for all .content?
Saitama and Naruto should have red backgrounds. Right now nothing has a red background. Any similarly added new characters should also have a red background.
Pseudocode
if(!(wayne || garth)){ apply red background to .content}
I'm willing to use JavaScript if necessary. I prefer css.
Chain the :not together
div:not(.wayne):not(.garth) .content {
background-color:red;
}
<div class="wayne">
<div class="content">Party On Garth</div>
</div>
<div class="garth">
<div class="content">Party On Wayne</div>
</div>
<div class="Saitama">
<div class="content">One punch.</div>
</div>
<div class="Naruto">
<div class="content">Dattebayo</div>
</div>
If you want to have multiple :not selectors, you need to change your CSS to look like this
CSS
div:not(.wayne):not(.garth) .content {
background-color:red;
}
CodePen
You are using a descendant combinator: . Your selector means:
"Select each element with class content which is a descendant of any div element without garth class which is a descendant of any div element without wayne class."
Remove it.
div:not(.wayne):not(.garth) > .content {
background-color:red;
}
"Select each element with class content which is a child of a div element without garth nor wayne classes."

Hide/show block with CSS

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...
http://dermanaissance.com/nos-solutions/
My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.
I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?
This is the code right now...
<div id="anchor-1" class="nos-anchor">1
<span class="nos-block">
<span class="nos-line"> </span>
<ul>
<li>Lift Sans Chirurgie</li>
<li>Atténuation des Rides</li>
<li>Contour des Yeux</li>
<li>Double-menton</li>
<li>Bajoues</li>
<li>Relâchement du Cou</li>
<li>Ouverture du Regard</li>
<li>Augmentation du Volume</li>
<li>Amélioration du Teint de la Peau</li>
<li>Acné Active</li>
<li>Cicatrices d’Acné</li>
<li>Décolleté</li>
<li>Atténuation des Cicatrices</li>
<li>Photorajeunissement</li>
<li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
<li>Couperose et Rosacée</li>
<li>Varicosités</li>
</ul>
</span>
</div>
and the CSS that makes this solution work...
.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}
.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}
.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}
.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}
If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -
Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"
<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
<div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
<div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
<div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
<div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
<div></div>
</div>
var currrentElementShowing;
function hideShow(sectionID) {
if (document.getElementById(sectionID) != currrentElementShowing) {
document.getElementById(sectionID).style.display = "block";
if (currrentElementShowing != undefined) {
currrentElementShowing.style.display = "none";
}
currrentElementShowing = document.getElementById(sectionID);
} else {
}
}
https://jsfiddle.net/cxjndqzu/
Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).
So, what I would do is create two CSS classes:
"ToggleClass"
"Active"
You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.
Then, using jQuery (sorry, but I think it has to be done), make the following function:
$(document).ready(function(){
$(".ToggleClass").on("click", function(){
$(".ToggleClass").removeClass("Active");
$(this).addClass("Active");
});
});
This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.
Leave a comment and let me know how this works for you - Good luck!
Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:
html
<div>
<div class="pill">1</div>
</div>
<div>
<div class="pill">2</div>
</div>
js
$('.pill').click(function(){
$(this).toggleClass('active')
if ($(this).hasClass('active')){
$('.pill').not(this).fadeOut(200)
}else{
$('.pill').not(this).fadeIn(200)
}
});
The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction
Fiddle

Bootstrap row causes FullPageJS to have wrong width and height

I have the following snippet directly inside the body tag:
<div id="container">
<div class="section profile">
<div class="row">
<div class="col-sm-6">
A
</div>
<div class="col-sm-6">
B
</div>
</div>
</div>
<div class="section technical">
</div>
</div>
My CSS file if it is neccessary:
body {
background-color: #808080;
}
.section {
}
.section.profile {
background-color: #2980b9;
}
.section.technical {
background-color: #bdc3c7
}
However, when I use FullPageJS, the result is like this:
(note: their are thin lines at the left and right)
The problem only happens if I use row div. It also happen if I wrap the row by another div. Also, the problem disappear if I resize the browser window.
This is how I call the script, just like the documentation:
<script>
$(document).ready(function () {
$("#container").fullpage();
});
</script>
I'm not pretty sure what are you expecting to happen, but check this:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
The container must be a class, not an id, but this also will add some padding to the sides.
Also, you should move the .row class to the upper level id and delete the current one with the .row class in it, the row <div> can have both classes without any problem.

Categories