select element starting with class name and contain part of string - html

I'm gonna select element with class but named 'path_from' etc.
Let me show you example
<div class='path_from_5_to_6'></div>
<div class='_6'></div>
<div class='path_from_6_to_5'></div>
<div class='path_from_3_to_2'></div>
I want to select element which class is start with path_from but contain '_6'
How can I do this?


You can use [class^="path_from"][class*="_6"] attribute selector
[class^="path_from"] - class starts with path_from
[class*="_6"] - class contains _6
[class^="path_from"][class*="_6"] {
background: blue;
}
<div class='path_from_5_to_6'>DIV</div>
<div class='_6'>DIV</div>
<div class='path_from_6_to_5'>DIV</div>
<div class='path_from_3_to_2'>DIV</div>


here is an example
[class*="path"][class*="6"] {
width: 100px;
height: 100px;
background: yellow;
}
<div class="path_To_6"></div>


You don't. That is what you use class and id for. class for related elements and id for individual elements.
<div class="path_6" id="path_from_5_to_6"></div>
<div id="_6"></div>
<div class="path_6" id="path_from_6_to_5"></div>
<div id="path_from_3_to_2"></div>
Then you select using .path_6 only:
.path_6 {
// styles
}

Related

how to change the background color or the text color of the whole site when clicking on a color ? Angular

How can I change the background color of the whole site or the text color when I click on a color from one component to another?
I need to use the Output decorator but how ?
style.component.html
<div>
<h2>background colors</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
</div>
app.component.html
<app-signin></app-signin>
<app-style></app-style>

I just made a cut down version for demonstration for the background-color. It works the very same for text-color.
Step 1:
We need to add an unique onclick trigger to the buttons/boxes. So if they are pressed, they will fire a script.
Step 2:
We add a function that removes all possible classes to change the background-color by using document.querySelector("body").classList.remove("class");. That will remove possible a class from the body tag.
Step 3:
We add the same JS line with add instead of remove to add the wanted class to the body tag: document.querySelector("body").classList.add("class");.
Step 4:
We apply changes to the class in the css
There of course possibilities to cut the script down. However I believe that this way is the easiest to understand and reproduce for a beginner.
function textWhite() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-white");
}
function textBlue() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-blue");
}
function textOrange() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-orange");
}
function textGreen() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-blue");
document.querySelector("body").classList.add("background-green");
}
.background-white {
background-color: white;
}
.background-blue {
background-color: blue;
}
.background-orange {
background-color: orange;
}
.background-green {
background-color: green;
}
<body>
<h2>background colors</h2>
<div class="theme-options">
<div onclick="textWhite()" class="theme-white">White</div>
<div onclick="textBlue()" class="theme-blue">Blue</div>
<div onclick="textOrange()" class="theme-orange">Orange</div>
<div onclick="textGreen()" class="theme-green">Green</div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white">White</div>
<div class="theme-blue">Blue</div>
<div class="theme-orange">Orange</div>
<div class="theme-green">Green</div>
</div>
</body>

Is there a way to select all children of one class recursively up to a different class

For instance in the code
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
</div>
The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.
<div class="ofChildClass" unselected>
<div class="other1" selected>
<div class="other2" selected>
<div class="ofStopClass" unselected>
<div class="other3" unselected>
<div class="other4" unselected>Text</div>
</div>
</div>
</div>
<div class="other5" selected></div>
<div class="ofStopClass" unselected></div>
</div>
</div>
</div>
Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.
To put the question into code is it possible to do this
.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...
without needing to repeat.

Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:
:root {
--c:initial; /* we start by initial (nothing defined, default value)*/
}
div {
outline:4px solid;
outline-color:var(--c);
padding:10px;
margin:5px;
}
div::before {
content:attr(class);
}
/* we define the color here */
.ofChildClass > * {
--c:red;
}
/* we reset the coloration again here*/
.ofStopClass {
--c:initial;
}
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>

What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:
div[selected]{
color: blue;
}
div{
color: initial;
}
This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.

First-child changes multiple nested divs CSS

I am having some problem with the first-child and nth-child function in CSS. I have some divs structured like this:
<div class = container>
<div id = 456, class = item>
<div id = header_123, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
<div id = 789, class = item>
<div id = header_124, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 789</div>
</div>
</div>
</div>
<div id = 123, class = item>
<div id = header_125, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 123</div>
</div>
</div>
</div>
</div>
I want to change the left-margin of the first div with class item. I use
.item div:first-child{
margin-left: 30px;
}
This changes the div with id 456's margin, but also the margin of all the text_container and header_span. This is not what I want; what am I doing wrong?

Use the immediate child selector >:
.item > div:first-child {
margin-left: 30px;
}
Note: And I could see that you are not wrapping your attributes inside " and also an id cannot start with a number.
I want to change the left-margin of the first div with class item.
If that's the case, you need to use:
div.item:first-child {
margin-left: 30px;
}
But that gives totally a different one.

Try This
.item:first-child{
margin-left: 30px;
}

Your html has few mistakes, Try to fix it like this: Demo
Wrap class and id with " "
Remove div's that have , in between id and class
HTML:
<div class="container">
<div id="456" class="item">
<div id="header_123" class="item_header">
<div class="text_container">
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
...
CSS:
.item:first-child {
margin-left: 30px;
}
As Sanjay and Praveen mentioned you need to use :first-child pseudo-class

CSS Opacity When Other Classes Present

I am working with another developer's code and want to know if there is a way to apply a different opacity to "scrollbar" using CSS code when "overlay" is present but not when "overlay-inactive" is present under "table" as shown below. Is this possible?
/*Want scrollbar to have opacity:1 in this table*/
<div class ="table">
<div class = "overlay"></div>
<div class = "scrollbar"></div>
</div>
/*Want scrollbar to have opacity:0 in this table*/
<div class ="table">
<div class = "overlay-inactive"></div>
<div class = "scrollbar"></div>
</div>
/*Class structure is the developer's and cannot be changed to have scrollbar as a subclass of overlay*/

Use the + operator to reference the next element to current element.
.overlay + .scrollbar {
opacity: 1;
}
.overlay-inactive + .scrollbar {
opacity: 0;
}
<div class="table">
<div class="overlay">1 - You can see me</div>
<div class="scrollbar">2 - You can see me</div>
</div>
<div class="table">
<div class="overlay-inactive">1 - You can see me but not below</div>
<div class="scrollbar">2 - Hidden content</div>
</div>

Use the adjacent sibling operator + to determine if the class exists on an adjacent element:
.overlay + .scrollbar {
opacity: 1;
}
.overlay-inactive + .scrollbar {
opacity: 0;
}

I need to change background of the last nested element using css

I want to change the background color of last nested element. I am using following css but it is not working
.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{
background-color:red;
}
i also tried
#cd-timeline .year-wrapper .cd-timeline-block:last-of-type{
background-color:red;
}
What am i doing wrong can we use last-of-type element with class
Fiddle http://fiddle.jshell.net/shfh0x63/2/
<div class="timeline-wrapper">
<div class="cd-container" id="cd-timeline">
<div class="year-wrapper">
<div class="cd-timeline-block">1</div>
<div class="cd-timeline-block">2</div>
<div class="cd-timeline-block">3</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">4</div>
<div class="cd-timeline-block">5</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">6</div>
<div class="cd-timeline-block">7</div>
<div class="cd-timeline-block">8</div>
<div class="cd-timeline-block">change background color of this only</div>
</div>
</div>
</div>

You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too
#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^ ^^^^^^^^^^^^^
http://fiddle.jshell.net/shfh0x63/3/

This is the easiest way of doing it using :last-child
(Demo)
.year-wrapper:last-child .cd-timeline-block:last-child {
background-color: red;
}