This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I would like to apply style on an element which is between 2 other elements (siblings) - see below - on the img which is between the label and input.
I can use the + operator for the selector of the siblings, but I want the style to be applied on the second element out of the three.
HTML:
<label class="field-name">XXXX</label>
<img class="validation-mark">
<input type="text" class="ng-invalid">
CSS:
label + img.validation-mark + input[type="text"].ng-invalid
{
display: inline !important; //I need this style to be applied on the img
}
You want to select the image, which is next to the label right?
If yes, you can use the adjacent sibling combinator selector:
An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
These selectors can help you apply styling in a contextual way.
label + img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
If it's not the case or the specific requirement, I would suggest you to just select the image itself and apply the style to it:
img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
Also, if you are using sass, like you tagged, you can do it like this:
img
{
&.validation-mark {
display: inline !important; //I need this style to be applied on the img
}
}
First thing, why don't you directly use class for applying styles.
.validation-mark{
display: inline !important;
}
And if you have to find 2nd element, you can also use JQuery.
$(label.field-name).next('img.validation-mark').css({'display': 'inline !important'});
Make it simple, it'll apply display: inline !important; on both image and input. Thanks
label + img.validation-mark,
label + img.validation-mark + input[type="text"].ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; only on img.
.validation-mark {
display: inline !important;
}
If you want to apply display: inline !important; only on input.
.ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; on all Elements.
label,
img,
label {
display: inline !important;
}
Related
This question already has answers here:
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed 20 days ago.
I have other company's html, show three lines:
<div class="classA classB classC">A_display</div>
<div class="classB classC">B_no_display</div>
<div class="classC">C_no_display</div>
I need A_display display, and let B_no_display\C_no_display hide.
The classA, classB, classC's name is known and the class combination will not change.
Can I use CSS selector make it? Like using this css:
.classA .classB .classC{
/* todo how to display A_display, don't display B_no_display C_no_display*/
/* display: inline !important;*/
}
.classB .classC {
display: none;
}
.classC {
display: none;
}
Then the page show only one line:
A_display
Yes, CSS selectors can be used to hide specific elements based on their class combinations. The updated CSS code to achieve the desired result is as follows:
.classA.classB.classC {
display: block;
}
.classB.classC {
display: none;
}
.classC {
display: none;
}
This will make the A display element visible while hiding the B no display and C no display elements. CSS selectors check each element for the exact class combination, and the display property is used to show or hide the elements.
You have to remove the whitespace between class names like .classA.classB.classC
.classA.classB.classC {
display: inline !important;
}
.classB.classC {
display: none;
}
.classC {
display: none;
}
<div class="classA classB classC">A_display</div>
<div class="classB classC">B_no_display</div>
<div class="classC">C_no_display</div>
This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
I have a scenario like the below to show a spacer(line) before and after icons(Cross symbols) and not to show spacer(line) before and after buttons(with Cancel text). How can I achieve this...
My Css file is
.Container > *:first-child::before,
.Container > *::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
All my icons, buttons(with Cancel text) are inside container div
Can we restrict showing lines before and after buttons(with Cancel text)?
I tried the below code which did not work.
.Container > *:not(input[type="button"]):first-child::before,
.Container > *:not(input[type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
Edit:
Assuming demo markup like this:
<div class="container">
<span>x</span>
<span>x</span>
<span>x</span>
<input type="button" value="Cancel" />
<input type="button" value="Cancel" />
<span>x</span>
<span>x</span>
<span>x</span>
</div>
.. you could use the following CSS to acheive what you need:
CSS
.container > *:not([type="button"]):first-child::before,
.container > *:not([type="button"])::after
{
/*content: url('../Content/Images/Line.png');*/
content: ''; /* if line image is used, this is not necessary */
background: #555; /* if line image is used, this is not necessary */
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
margin: 0 8px;
}
FIDDLE
Side note: Instead of using the * selector - you could target the specific child elements, or -even better - add a class name to the child elements
So why didn't your original css - as posted in the question - work?
The :not() pseudo class can only accept a simple selector.
From the spec:
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So although the not pseudo class can accept an attribute selector like: :not([type="button"]), in your code you have combined it with an element selector - ie. input ---- :not(input[type="button"]) - which is why the code doesn't work.
So this will work:
.Container > *:not([type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
..but this won't:
.Container > *:not(input[type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
Here is a demo to illustrate this.
If you only want the line before and after the icons, instead of using wildcard * and then trying to deselect buttons, simply target the icons alone. Assuming the icons has class .class
.Container > .icon:first-child::before,
.Container > .icon::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
or if the icons are <img>, corresponding css would be
.Container > img:first-child::before,
.Container > img::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
problem solved (can't be more specific since you haven't provided much information).
I think the key to solving your problem is using an adjacent sibling selector. You can select elements by their preceding sibling as follows:
.sibling#one + .sibling#two {
/* style every .sibling#two that is preceded by a .sibling#one */
}
I've made a quick example here, using borders instead of the images with lines and div's as buttons. I hope this will help, good luck!
Is it possible to style another element on :focus of a specific element?
Something like:
input:focus #header {
display: none;
}
I tried doing that but it didn't work.
Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.
.input:focus #header
That is applying selecting all #header where they are a descendant of input
If its a sibling so you want, use the next sibling selector +:
input:focus + #header
For more information on child/sibling combinators
you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp
HTML:
<button>button</button>
<div class="div1">div1</div>
CSS:
button:hover ~ .div1 {
color: red;
}
So you hover over the button BUT the div1 element gets styled.
Just make sure that the BUTTON element is first and the element you are styling is SECOND.
If .text is hovered, how do I also haver .imageis?
All My Clipboards
<a class="imageis sprite_image_base" href="#"></a>
I tried doing something like this in my CSS:
.text:hover, .imageis:hover + .text {
background-position: -107px -311px !important;
height: 16px;
margin-right: 8px;
vertical-align: middle;
width: 23px;
}
Note: I want to do this with pure css without jquery.
I don't know why others are taking about Javascript, this is easily done with CSS.
You use the adjacent sibling combinator or general sibling combinator.
First, declare that you want .text to be hovered for something to happen, like this: .text:hover, then add a sibling combinator: ~ or +, and finally select the sibling you want to affect, in this case: .imageis.
Put it together and you get:
.text:hover + .imageis {
/* css-stuff */
}
You could also select both elements' parent and do a regular descendant selector, like this:
.parent:hover .imageis {
/* css-stuff */
}