div id naming structure and reference to CSS class - javascript

I am sorry because this is a basic question, I am new to CSS yet I need to get something done quickly so I was hoping for an espresso answer...
In my document I have divs that I want to name using the naming structure [category].[specificID] and they should all be subject to the [category] CSS definition. E.g.
<div id="sectionTitle.experience">Experience</div>
...
<div id="sectionTitle.education">education</div>
I want the final ID to be distinct because I want to have the flexibility for separate JS handling. But the formatting of each sectionTitle should be the same, hence the same CSS class.
How can I do this?

You can use IDs and classes. For example:
<div id="sectionTitle_experience" class="sectionTitle">Experience</div>
Note that I have replaced the . with a _ to make it accessible in CSS - otherwise you'd have to resort to something like [id='sectionTitle.experience'] instead of #sectionTitle_experience.
EDIT: That being said, if you want a quick-and-dirty fix, try this CSS:
[id^='sectionTitle.'] { /* styles here */ }

Firstly your IDs must be unique to have valid HTML. Two elements cannot share the same ID, but they can share the same class name.
Also, I "think" you cannot have a . in your ID name, but I could be wrong about that.
What you want is:
<div id="experience" class="sectionTitle">Experience</div>

Create a css class .sectionTitle and have your desired styles into it. Pass this class to every div which will have your title text. So you can have same styles for header with different ids.

Related

Attaching and toggling a CSS class of element in angular using it's HTML Selector

I have a dropdown component in angular 12. It is shows the selectize like behavior. It is implemented as
<ngx-select-dropdown
[config]="config"
[options]="dropdownOptions"
[(ngModel)]="dataModel"
[multiple]="false"
></ngx-select-dropdown>
by using https://github.com/manishjanky/ngx-select-dropdown
After rendering it generates markup like
Now, I want to modify the class of the button (highlighted in yellow color) rendered in markup but I don't have direct access to the markup of the button
How can we do that ?
You can see this thread for some older solutions: How to style child components from parent component's CSS file? keep in mind ::ng-deep is deprecated.
I prefer the following and I will probably add it to that thread.
The only way to get your css to permeate down to a child is to make the css file global. You can use ViewEncapsulation.None to make the css of the entire component global, but that's pretty messy. I prefer to just put this global class inside the global styles.css, or you can make a new file and add it to the styles array in angular.json.
So the question is what do we use as the selector? We can't just select button as it will override all the buttons in the project, and we don't want to use .ngx-dropdown-button alone because we might want different styles for different dropdowns. We want to add a specific class inside the component first. Make sure it is unique, probably best to use the component's name.
<ngx-select-dropdown
class="my-component-name-dropdown"
[config]="config"
[options]="dropdownOptions"
[(ngModel)]="dataModel"
[multiple]="false"
></ngx-select-dropdown>
Now we can select this specific dropdown from our global styles file. Though, we need to make sure we achieve a high enough specificity to override the default styles. The quick and dirty way is to just use !important next to every property, but then you leave no way to override your css. A better way is to repeat a class name until we achieve the desired specificity. I found I needed to repeat a class three times here.
In Global Styles File
.my-component-name-dropdown
.ngx-dropdown-button.ngx-dropdown-button.ngx-dropdown-button {
color: red;
}
Or the quick and dirty way
.my-component-name-dropdown .ngx-dropdown-button {
color: red !important;
}
Of course if you want to override all ngx-dropdown-buttons, the unique class is not necessary and you can just use the .ngx-dropdown-button class.
Note: Many UI components have a class option in the config / options object to let you override the default css, you may want to request that the devs add this.

how to override a css class without affecting other classes with the same name

I have many widgets that are combined in a single page, however i need to override a container class for a certain widget, but what is happening is that all widgets having a class with the same name are affected. below is screenshot from the inspect element
the selected row with class=container is the widget that i want to edit.
Many thanks
There are multiple ways you can approach this. One, you can create an id for that HTML tag that you want add'l/different style and create a #<id_name> in your css to handle that style or add another classname in front of container for the one you want to style. Or you can use CSS specificity for the nth child render this add'l style.
Approach 1)
HTML
<tagname id="other_css" class="container" ...>
CSS
#other_css {
// css stuff
}
Approach 2
HTML
<tagname class="container other_css" ...>
CSS
.other_css {
...
}
.container {
....
}
Approach 3
HTML
<wrapper>
<tagname class="container ...>
<tagname class="container ...>
<tagname class="container ...> <- the one you care about
</wrapper>
CSS
wrapper:nth-child(3) {
...
}
Resources:
- https://www.w3.org/TR/selectors-3/#specificity
If I understand, you want to have a different styling for one of the elements with the class container. A good practice would be to create another class with the special styling: container new-class
Just add another class beside container class and define/write your desired css code inside the new class.
Dear I think you want to override the default class name container of bootstrap which is a bad approach and make hurdles in future for you.
So better to use some div with class name inside container and do what ever you want to...
An if you are bound to not update html then try to use .container:nth-child(5) where (5) is the number on which that class is.

Best practice in finding a DOM element

I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")

How do I style every last element of every line/row differently?

I've been trying to create a grid using
display:inline=block
I need to style every last element of every line/row differently. I tried
nth-child
nth-of-type
However, when I use that, it gets mixed up with my other grids. So how do I do it without adding new classes?
As far as i've seen from your code, you cannot use nth-child to achieve your goal. I will try to explain with an example:
you want the 4th and the 8th child of the section class="four" to be coloured red. In order to use nth-child or nth-of-type, you have to reference to children starting from their parent, i.e. body. So it's difficult to say what number in the list of body's children are the 4th and the 8th children of section class="four", and it's not flexible at all.
I think you are using it in the wrong way, something like section.four:last-child, which is not correct. Please check: w3schools link
Furthermore, nth-child and nth-of-type cannot be used with a selector but only with an element, so no way to do something like .four:nth-child (in the case you make a div with class="four" outside your sections).
So the only way, without adding more classes is jquery, like this:
$('.four').last().css('background-color', 'red');
In CSS3, if you associate every nth-child with a class of some type and every nth-of-type with another class use can style each one differently.
For instance,
<html>
<div class="nth-child">
//some code
</div>
<div class="nth-of-type">
//some code
</div>
</html>
Then in you CSS file you would do something similar to this:
.nth-child
{
//style rules
}
.nth-of-type
{
//style rules
}
I hope this is what you were looking for, without a posted example it is kinda hard to understand what you exactly mean. But if you want to us JS for this then you would create a JS function
obtain all elements in your page using "var elements= document.getElementsByClassName("nth-child")"
the you would loop through "elements.length" setting each element style to "none"

HTML Classes WITH IDs

I'm a little confused about HTML classes and IDs, as I'd like to use them BOTH to describe an HTML element. Is this valid and supported by most browsers?
The motivation for me to use both is this:
I have a CSS style that I would like applied to multiple elements.
I have some AJAX and Javascript that will manipulate those same elements, so I need a way to identify which element is which using an ID.
So I'd like to use an id to identify each element for JS manipulation AND at the same time I would like to specify a class so that the same style is applied from the same css.
An ID would be unique to only one item, where a class can be used to group many items together. You can use them together as you stated, ID as a unique identifier for Javascript and the class to markup with CSS.
Search for html class vs id to get many articles about this topic.
Example:
<ul>
<li class="odd" id="item1">First Item in the List</li>
<li class="even" id="item2">Second Item in the List</li>
<li class="odd" id="item3">Third Item in the List</li>
</ul>
Yes, it is perfectly valid to use both the ID and Class properties in one element. Example:
<div class="infoBox" id="myUniqueStyle"> *content* </div>
Still, keep in mind that an ID can only be used once (hence its name), while you can use classes as many times as you'd like througout a document. You can still use both the ID and the class to apply styles, while only the ID is a simple way of reaching the element through javascript.
A good way of doing it is applying IDs to all elements that you know are unique (header, navigation, main containers etc.), and classes to everything else.
"Is the" applies to elements using ID: "This is the navigation bar", "this is the header"
"Is a" or "is an" applies to elements using classes: "This is a blogPost", "this is an infoBox" etc.
You can definitely use both if you need to.
An ID is typically used to identify structural sections of your site - you should have only one element with a particular ID and any element can have only one ID.
A class is used to set styles which might be used in more than one place in your HTML file - any element can have multiple classes set.
A typical HTML document using both IDs and classes might be something like
<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>
Yes, any normal browser should allow the setting of CSS classes regardless of element id. However, setting styles on a specific element (using ids, for example) may override styles set through a CSS class.
Just a very obscure note about combining class and id in your CSS declarations, there's a bug with IE6, if you have:
two or more pages which have an
element with the same id
those elements have different
classes
you're styling them using an
#idname.classname rule
then only the first rule in the stylesheet will take effect.
See this page for details
Yes it is valid in all browsers. ID expresses just the unique IDentification of your html control through others, and class applies some style to it. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

Categories

Resources