We have a a interactive filter on our company website, used to show people based on department, without wanting to spend more money on a developer who has access to the templates, we can make CSS changes via wordpress.
Can hide the filters themselves at the moment as they seem to be contained within a style called : #Filters_Department
Label appears like this but other labels on the page we don't want to hide.
<label>Department:</label>
This Works for part of it.
#filters_department
{
display:none
}
Have tried:
label[for="department"]
{
display:none;
}
I think you just have to add the for attribute to your label.
<label for="department">Department : </label>
Why don't you try adding a class to the label and targeting it that way?
<label class="hidden">Hidden label</label>
.hidden { display: none;}
This selector works with attributes
[attribute="value"] - looks for attribute that is matching exactly with the "value"
[attribute^="value"] - looks for attribute that starts with the "value"
[attribute*="value"] - looks for attribute that includes "value" somewhere in it
In your case you don't have any attributes. Add
class="..." or id="..." or custom data-attr="..."
If you use class or id attributes, better use the .value {} or #value {} selector.
But note that these selectors have different importance than the attribute selectors, it is good to know when overwriting.
See the example below
label {
display: block;
}
label[data-attr="dept-1"] {
display: none;
}
label[class="someClass"] {
color: blue;
font-size: 21px;
}
.someClass {
color: red;
font-size: 16px;
}
/* class selector can't overwrite the attribute selector */
#someId {
color: red;
}
/* id selector can overwrite the attribute and the class selector*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label class="someClass" data-attr="dept-1">Department: 1</label>
<label class="someClass" data-attr="dept-2">Department: 2</label>
<label class="someClass" data-attr="dept-3" id="someId" >Department: 3</label>
</body>
</html>
Related
I've been using Bootstrap's vue form-group in order to create input fields.
I'm trying to apply certain CSS on the 'legend' Element for the following code:
<fieldset id="__BVID__59" class="form-group" required="required">
<legend class="col-form-label pt-0">Login</legend>
<div tabindex="-1" role="group">
<input type="text" class="form-control">
<!----><!----><!---->
</div>
</fieldset>
My goal is to add required asterisks to the labels, therefore my suggestion would be:
.form-group[required] legend::after {
content: '*';
color: red;
}
but my CSS doesn't seem to recognise the legend element, no matter what I do or how I write it.
it's the same if I use label instead of legend.
I've tried also using nth-child(0) of fieldset (the parent) but it seems like it's just ignoring this child and nothing really happens. I thought it has something to do with the CSS configurations of the bootstrap i'm using, but also using !important doesn't seem to do anything.
any help would be highly appreciated.
In Vue if you use a scoped style tag <style scoped> you wont be able to select subcomponents by default. To do so you need to use a deep selector
<style scoped>
.form-group[required] ::v-deep legend::after {
content: '*';
color: red;
}
</style>
Without scoped your css should work as expected, but i don't recommend doing so as it can mess with other components and be messy to debug.
<style>
.form-group[required] legend::after {
content: '*';
color: red;
}
</style>
This is an image of my code. I have a footer-container inside which there are several footer-content classes, each of which contains a <p> tag and then a <span> tag. I want to apply a style to span of the last footer-content
This is what it looks like I want to remove the last - after risk analysis
I have tried this
.footer-container:last-child :last-child {
display: none;
}
but this hides all the span tags
Edit: To create those dashes between your entries, instead of creating those span.footer-dash at all, you can do that using CSS only:
.footer-content:not(:last-child) .footer-item::after {
content: "-";
color: #666;
padding: 0 20px;
}
Apply styling as needed. The selector makes sure the dash isn't added after the last element at all, so no need to hide anything if it's not there in the first place.
:last-child asks Am I the last child of my parent?, not Who is my last child element? (which your selector suggests you think).
So either use the descendant selector (space):
.footer-container :last-child :last-child {
display: none;
}
or use it on the correct child elements:
.footer-content:last-child :last-child {
display: none;
}
Please note that usage of :last-child should be made carefully as it ties your stuff very closely to the DOM structure (which you might want to change later).
I'd suggest you change it like this:
.footer-content:last-child .footer-dash {
display: none;
}
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
/* Selects any <p> that is the last element
among its siblings */
p:last-child {
color: lime;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
That selector should be
.footer-container :last-child :last-child { ... }
(space after .footer-container)
I think this should help you
.footer-container .footer-content:last-child{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css practice</title>
</head>
<body>
<div class="footer-container">
<div class="footer-content">
<p><span>Section Number 1</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 2</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 3</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 4</span></p>
</div>
</div>
</body>
</html>
You can just add:
.footer-container .footer-content:last-child .footer-dash {
display: none;
}
As per the Q - I want to remove the last - after risk analysis
This will just work fine for you. This will also prevent other elements from being affected by your :last-child CSS selection if you change the order of the content inside the .footer-content.
Try this:
.footer-container .footer-content:last-child span {
/* css here */
}
This code should work:
.footer-container:last-child>:last-child {
display: none;
}
Using a space will target all the elements that are last children inside .footer-container:last-child, while using > will target the last child of
.footer-container:last-child only.
If I have a selector defined for input:show_invalid
<style>
input:show_invalid {
background-color: red;
}
</style>
When I reference it in this HTML, the input does not show as red:
<html>
<input type='text' class='input:show_invalid'/>
</html>
In the CSS code, classes are marked by a ., not a : at the beginning. In the HTML code, you just write the class name into the class atrribute - without the dot or anything else.
so your code has to be
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
There's a few things wrong with your code.
You're using a non-existing pseudo-class, show_invalid. You probably meant to use the invalid pseudo-class.
You are targeting all <input> elements (not a class) with a pseudo-class show_invalid with your CSS selector but adding the entire string input:show_invalid as a class in your html.
You either wanted to use the invalid pseudo-class:
input:invalid {
background-color: red;
}
<input type='email'/>
or to target a class:
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
Try
<input type='text' class='show_invalid'/>
You're already in an element
A class selector should precede with a period eg. specify a simple class show and access the css as
.show {
background-color: red;
}
OR
if you want the styling to be same, then replace the class name to
class='show_invalid'
Hope it helps
As I understand it, a class should take precedence in styles over the element styles. I've tried to style button, input[type=button], and input[type=submit] and noticed that with the input (button and submit), the border style from the element would take precedence over the border style for the class. I did not notice this behaviour, however, on the button element.
Here's an example demonstrating the situation:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type=button], button {
border: none;
}
.class {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" class="class" value="With class" />
<input type="button" value="Without class" />
<button class="class">With class</button>
</body>
</html>
The above renders like this:
I've noticed the same behaviour in Safari, Firefox, and Chrome.
Am I doing something wrong? Have I misunderstood specificity in this case? Is this specific to border only?
You're not comparing apples to apples. Attribute selectors have a specificity of 0,1,0 just like classes. However, element selectors have a specificity of 0,0,1, which makes your first selector of input[type="button"] have a specificity of 0,1,1 which is greater than 0,1,0.
http://www.w3.org/TR/CSS2/cascade.html#specificity
If you wanted them both to have the same specificity, you should use:
input.class
input[type="button"]
-or-
.class
[type="button"]
An attribute selector + the element selector have a higher specificity than a simple class selector.
Possible fix:
.class, .class[type] {
border: 1px solid red;
}
this way you can apply the class "class" to any element with a type specified and achieve the results you wanted.
i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.