css selector :not with this structure doen't work in my case [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
Is there a CSS parent selector?
26 answers
I'm trying to customize the font size for the label text but in the meanwhile I need that the font-size affects only the text and not the checkbox button. This is my code:
.check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label>But it seems not working for some reason. The checkbox is affected itself by this rule.
What's wrong and how can I write a rule to set the size of the font only for the label but excluding the ?
Thanks in advance.
html css
edited Nov 8 at 10:48
Smollet777
489311
asked Nov 8 at 10:42
Francesco
118215
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 8 at 10:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
Is there a CSS parent selector?
26 answers
I'm trying to customize the font size for the label text but in the meanwhile I need that the font-size affects only the text and not the checkbox button. This is my code:
.check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label>But it seems not working for some reason. The checkbox is affected itself by this rule.
What's wrong and how can I write a rule to set the size of the font only for the label but excluding the ?
Thanks in advance.
html css
edited Nov 8 at 10:48
Smollet777
489311
asked Nov 8 at 10:42
Francesco
118215
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 8 at 10:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Thelabeldoesn't have theForm-fieldIconclass.
– Jean-Marc Zimmer
Nov 8 at 10:47
1
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
Is there a CSS parent selector?
26 answers
I'm trying to customize the font size for the label text but in the meanwhile I need that the font-size affects only the text and not the checkbox button. This is my code:
.check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label>But it seems not working for some reason. The checkbox is affected itself by this rule.
What's wrong and how can I write a rule to set the size of the font only for the label but excluding the ?
Thanks in advance.
html css
edited Nov 8 at 10:48
Smollet777
489311
asked Nov 8 at 10:42
Francesco
118215
This question already has an answer here:
Is there a CSS parent selector?
26 answers
I'm trying to customize the font size for the label text but in the meanwhile I need that the font-size affects only the text and not the checkbox button. This is my code:
.check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label>But it seems not working for some reason. The checkbox is affected itself by this rule.
What's wrong and how can I write a rule to set the size of the font only for the label but excluding the ?
Thanks in advance.
This question already has an answer here:
Is there a CSS parent selector?
26 answers
.check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label> .check-field-privacy:not(.Form-fieldIcon) {
font-size: 12px;
}<label class="check-field-privacy Form-label Form-label--block" for="checkprivacybox">
<input type="checkbox" class="Form-input" id="checkprivacybox" aria-required="true" required="">
<span class="Form-fieldIcon" role="presentation"></span> Privacy Policy
</label>html css
html css
edited Nov 8 at 10:48
Smollet777
489311
asked Nov 8 at 10:42
Francesco
118215
edited Nov 8 at 10:48
Smollet777
489311
asked Nov 8 at 10:42
Francesco
118215
edited Nov 8 at 10:48
Smollet777
489311
edited Nov 8 at 10:48
Smollet777
489311
edited Nov 8 at 10:48
Smollet777
489311
489311
asked Nov 8 at 10:42
Francesco
118215
asked Nov 8 at 10:42
Francesco
118215
asked Nov 8 at 10:42
Francesco
118215
118215
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 8 at 10:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 8 at 10:54
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Thelabeldoesn't have theForm-fieldIconclass.
– Jean-Marc Zimmer
Nov 8 at 10:47
1
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52
add a comment |
1
Thelabeldoesn't have theForm-fieldIconclass.
– Jean-Marc Zimmer
Nov 8 at 10:47
1
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52
1
1
The
label doesn't have the Form-fieldIcon class.– Jean-Marc Zimmer
Nov 8 at 10:47
The
label doesn't have the Form-fieldIcon class.– Jean-Marc Zimmer
Nov 8 at 10:47
1
1
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
you can directly target the span element
.check-field-privacy span{
font-size:12px;
}
hope this helps!!
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
you can directly target the span element
.check-field-privacy span{
font-size:12px;
}
hope this helps!!
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
|
show 1 more comment
up vote
0
down vote
you can directly target the span element
.check-field-privacy span{
font-size:12px;
}
hope this helps!!
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
|
show 1 more comment
up vote
0
down vote
up vote
0
down vote
you can directly target the span element
.check-field-privacy span{
font-size:12px;
}
hope this helps!!
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
you can directly target the span element
.check-field-privacy span{
font-size:12px;
}
hope this helps!!
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 8 at 10:50
Suhas NM
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 8 at 10:50
Suhas NM
725
answered Nov 8 at 10:50
Suhas NM
725
725
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Suhas NM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
|
show 1 more comment
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
I want the opposite of what you suggested: only the <span class="Form-fieldIcon" role="presentation"></span> shouldn't have font-size: 12px
– Francesco
Nov 8 at 10:51
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
do you want the checkbox size to be increased?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
or the text which is in the span should be affected?
– Suhas NM
Nov 8 at 10:53
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
@Francesco just set the font size for the span separately then
– Pete
Nov 8 at 10:55
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
I don't want to set the font size of the span separately. I want to leave it as is (2em) but not affecting it size with the css rule on the label. Is it possible?
– Francesco
Nov 8 at 11:01
|
show 1 more comment
1
The
labeldoesn't have theForm-fieldIconclass.– Jean-Marc Zimmer
Nov 8 at 10:47
1
It's not working because you are using it wrong - the not means that the first selector does not include the second selector - it doesn't mean that the first selector does not contain a child element with the second selector. There is currently no css to do what you want
– Pete
Nov 8 at 10:52